How to add overlay color on image?

Question

How to add an overlay on my image?

I used :after property but it's not working. I used it before it's worked but this time it's not working. I think I made some mistake but I can't find that. Can anyone give me a solution?

Github Link: https://iamtheasad.github.io/Bino-l-p/

Codepen Link: https://codepen.io/aasaadzaman5/pen/PowxrVp

 .team_list img {
   border-radius: 50%;
   border: 4px solid #e74c3c;
   z-index: 1;
   position: relative;
   -webkit-box-shadow: 0px 1px 6px 1px #000;
   box-shadow: 0px 1px 6px 1px #000;
}

.team_list img:after {
   position: absolute;
   content: '';
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: red;
}

Html:

<div class="team_list">
     <span>
        <img src="images/team/team_1.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <img src="images/team/team_2.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <img src="images/team/team_3.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <img src="images/team/team_4.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <img src="images/team/team_5.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
  </div>

score 0 · Answer 1 · answered Jan 21 '20 at 09:52

try like this

HTML

<div class="team_list">
     <span>
     <div class="overly">
     <img src="images/team/team_1.jpg" alt="Team Person" />
     </div>

        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <div class="overly">
     <img src="images/team/team_2.jpg" alt="Team Person" />
     </div>
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
       <div class="overly">
     <img src="images/team/team_3.jpg" alt="Team Person" />
     </div>
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <div class="overly">
     <img src="images/team/team_4.jpg" alt="Team Person" />
     </div>
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <div class="overly">
     <img src="images/team/team_5.jpg" alt="Team Person" />
     </div>
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
  </div>

css

.team_list > span{
  float:left;
  text-align:center;
  padding:10px;
}
.team_list .overly{
  position:relative;
  border-radius: 50%;
   border: 4px solid #e74c3c;
   z-index: 1;
   position: relative;
   -webkit-box-shadow: 0px 1px 6px 1px #000;
   box-shadow: 0px 1px 6px 1px #000;
   width:200px;
   height:200px;
   transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.team_list .overly img{
  max-width:100%;
   border-radius: 50%;
}
.team_list .overly:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  background-color:#ff00009e;
  width:100%;
  height:100%;
  border-radius: 50%;
   transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
opacity:0;
}
.team_list .overly:hover:after{
 opacity:1;
}

How to add overlay color on image?

1 Answers1