本篇文章小编给大家分享一下CSS实现鼠标移至图片上显示遮罩层效果实例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
1、将遮罩层html代码与图片放在一个div
我是放在 .img_div里。
2、为图片及遮罩层添加样式
图片：relative
遮罩层：absolute
使两者样式重合。
鼠标不在图片上时，遮罩层不显示 .mask { opacity: 0; } 。
.img_div {
margin: 20px 400px 0 400px;
position: relative;
width: 531px;
height: 354px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 531px;
height: 354px;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
}
.mask h3 {
text-align: center;
}
3、使用hover
改变透明度，使遮罩层显示。
.img_div a:hover .mask {
opacity: 1;
}
效果图：
html鼠标经过遮罩层怎么实现 CSS如何实现鼠标移至图片上显示遮罩层效果 CSS实现鼠标移至图片上显示遮罩层效果实例...
