CSS如何给图像设置透明度

如第一张图片，当鼠标指向是变成第二张图片的效果，而通过下图的代码只能是图片发白，上图的效果是怎么实现的？

应该不是给图片设置透明度，是给一个块状元素设置了颜色和透明度吧。

这个是两个层，下面的还是原图没有变化。上面的是一个半透明的以黄色为背景的层 （一般是div 一类的）

用CSS3的rgba颜色通道写

<style>
div.alpha{position:relative;display:inline-block}
div.alpha div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:orange;filter:alpha(opacity=80);opacity:.8;display:none}
div.alpha:hover div{display:block}
</style>
<div class="alpha"><img src="https://img-ask.csdn.net/upload/201701/10/1484019125_493549.jpg"><div></div></div>

文字应该也是独立的一个层，我这里直接用你图片了

用background：rgba（0,0,0,0.5）设置透明度，图片文字互不影响