图片hover时有遮罩

以往想到给图片加个蒙版遮罩，之前都会这样写

 .div1{position: relative;display: inline-block;}
 .span1{position: absolute;top:0;bottom: 0;left:0;right:0;background: rgba(0,0,0,.5);display: none;z-index: 2;}
 .img1:hover + .span1{display: block;}

<div class="div1">
    <img src="imgurl" class="img1"/>
    <span class="span1"></span>
</div>

其中span 担当了黑色的遮罩的功能，图片hover时影响着span的出现，但这中hover时会出现闪烁

最近发现了一种新的写法，非常的简单，html结构和css都变得很简洁，也没有上面的这种问题

.div2{background:black;display: inline-block;font-size: 0}
.img2:hover{opacity: 0.5}

<div class="div2">
    <img src="imgurl" class="img2"/>
</div>

外围的div背景色为黑色，当图片hover时图片呈半透明，就会半露出div的黑色，看起来就像在图片加了层黑色的遮罩。