CSS Hover：悬停时叠加在图像上

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>