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>