Css 覆盖在图像上等于固定大小的图像

我需要一个图像上的悬停效果，固定到图像大小，即使图像变大或变小

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

.img wrap{
宽度：400px；
高度：自动；
位置：相对位置；
}
.img wrap>img{
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景色：rgba（0,0,0,0.5）；
显示：无；
}
.img wrap:hover>.overlay{
显示：内联块；
}

什么样的悬停效果？如果效果可以通过过滤器实现，可以使用CSS，如果不能，则使用JS。如果要使用叠加效果进行悬停，则应设置图像的宽度和高度。因此，在图像周围放置一个内联容器元素，然后…谢谢。容易的solution@ShakilAhmad这是我的荣幸