CSS 호버 : 호버 동안 이미지에 오버레이

Question

이미지가 있습니다. onhover 이미지가 변하고 border-radius가 사라집니다. 하지만 그 이미지와 함께 오버레이 배경을 원합니다.

이 코드를 사용해 보았습니다.

.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; 
 
    
 
\t -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"> 
 
\t \t \t \t \t 
 
         <img src="https://blackrockdigital.github.io/startbootstrap-agency/img/team/1.jpg" 
 
\t \t \t \t \t \t onmouseout="this.src='https://blackrockdigital.github.io/startbootstrap-agency/img/team/1.jpg'" 
 
\t \t \t \t \t \t onmouseover="this.src='https://blackrockdigital.github.io/startbootstrap-agency/img/team/2.jpg'" 
 
\t \t \t \t \t \t class="img-responsive img-circle" alt=""> 
 

 
         <div class="opacity_box"></div> 
 
\t \t \t \t \t 
 
         <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>

나는 오버레이 효과를 얻을 수 있지만 제대로 작동하지 않습니다.

감사합니다.

Answer 1

문제 : 오버레이를 표시하면 더 이상 이미지가 표시되지 않습니다.

해결 방법 : 부모를 가져 할 때, 이미지를 마우스 오버 효과를 적용 자체

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