イメージの固定サイズに等しいオーバーレイ

Question

イメージにホバー効果が必要です。イメージが大きくなったり小さくなったりしてもイメージサイズに固定されています。

<div> 
<img scr="abc.jpg"> 
</div> 

Answer 1

.img-wrap{ 
 
    width: 400px; 
 
    height: auto; 
 
    position: relative; 
 
} 
 
.img-wrap > img{ 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.overlay{ 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: rgba(0,0,0,0.5); 
 
    display: none; 
 
} 
 
.img-wrap:hover > .overlay{ 
 
    display: inline-block; 
 
}

<div class="img-wrap"> 
 
    <div class="overlay"></div> 
 
    <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png"> 
 
    
 
</div>