Question 254400 in Html Question posted in
Some basic documentation can be found here.

Html – How to add a shape behind an responsive image with css?

How would i go with making a drop shadow like this one (picture link here)? Ive tried using Pseudo Element but that didnt work with all of my code. Im not finished with everything but this problem is really bugging me.

 <div class="header">
        <div class="flexcontainer">
            <img id="image" src="CV-PP-2.jpg" alt="">
        <h1>Samira Hadid</h1>
        </div>
        <h3>Full-Stack Web Developer</h3>
      </div>

.flexcontainer{
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
    align-items:center;
    flex-wrap: wrap;
}
 #image {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    
}

I also need it to follow with the picture since it needs to be responsive.

Tags:

2

Answers


  1. 0

    Try This ….

    #image {
    max-width: 300px;
    max-height: 300px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}
    Login or Signup to reply.
  2. 0

    Use this I hope you are looking for this.

    https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

    filter: drop-shadow(30px 10px 4px #4444dd);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search