CSS Hover: Наложение на изображение во время зависания

Question

У меня есть изображение. onhover изображение меняется, а пограничный радиус исчезает. но вместе с этим я хочу оверлейный фон на изображении.

Я пробовал этот код.

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