图像叠加等于图像的固定大小

Question

我需要悬停在图像上的效果，即使图像在响应中变大或变小，也会固定在图像尺寸上。

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

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;