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

Question

我有一张图片。 onhover图像正在变化，边界半径也在消失。但随之而来的是我想在图像上叠加背景。

我试过这段代码。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我获得了叠加效果但效果不正常。

谢谢。

Answer 1

问题：当您显示叠加层时，您不再悬停图像。

解决方案：悬停父级时应用悬停效果，而不是图像本身

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;