CSS Hover : Overlay on image while hovering

Question

I have an image. onhover the image is changing as well as border-radius is disappearing. but along with it I want an overlay background on the image.

I have tried this code.

.team-member {
    text-align: center;
    margin-bottom: 50px;
}

.opacity_box{
    width: 225px;
    height: 225px;
    background: rgba(0,0,0,0.6);
    display: none;
    position: absolute;
    left: 27.5%;
    top: 0;
}

.team-member img {
    margin: 0 auto;
    
	-webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}
.team-member img:hover {
border-radius:0%;
-webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;

}


.team-member img:hover + .opacity_box {
    display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="team-member">
					
                        <img src="https://blackrockdigital.github.io/startbootstrap-agency/img/team/1.jpg"
						onmouseout="this.src='https://blackrockdigital.github.io/startbootstrap-agency/img/team/1.jpg'"
						onmouseover="this.src='https://blackrockdigital.github.io/startbootstrap-agency/img/team/2.jpg'" 
						 class="img-responsive img-circle" alt="">

                         <div class="opacity_box"></div>
					
                        <h4>Kay Garland</h4>
                        <p class="text-muted">Lead Designer</p>
                        <ul class="list-inline social-buttons">
                            <li><a href="#"><i class="fa fa-twitter"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a>
                            </li>
                        </ul>
                    </div>

I get the overlay effect but it is not working properly.

Thank you.

Answer 1

Problem: when you show overlay, you are no longer hovering image.

Solution: Apply hover effects when you hover parent, not image itself

.team-member {
  margin-bottom: 50px;
  text-align: center;
}
.opacity_box {
  width: 100%; /* usually you want to have overlay cover area, so no need for fixed size */
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none; /* click-through overlay */
}
.image-wrapper img {
  margin: 0 auto;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
}
.image-wrapper:hover img {
  border-radius: 0%;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
}
.image-wrapper:hover .opacity_box {
  display: block;
}
.image-wrapper {
  position: relative;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="team-member">
  <div class="image-wrapper">
    <img src="https://blackrockdigital.github.io/startbootstrap-agency/img/team/1.jpg" onmouseout="this.src='https://blackrockdigital.github.io/startbootstrap-agency/img/team/1.jpg'" onmouseover="this.src='https://blackrockdigital.github.io/startbootstrap-agency/img/team/2.jpg'"
    class="img-responsive img-circle" alt="">

    <div class="opacity_box"></div>
  </div>

  <h4>Kay Garland</h4>
  <p class="text-muted">Lead Designer</p>
  <ul class="list-inline social-buttons">
    <li><a href="#"><i class="fa fa-twitter"></i></a>
    </li>
    <li><a href="#"><i class="fa fa-facebook"></i></a>
    </li>
    <li><a href="#"><i class="fa fa-linkedin"></i></a>
    </li>
  </ul>
</div>