css - 叠加在等于图像固定大小的图像上

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>