本篇文章小编给大家分享一下CSS实现鼠标移至图片上显示遮罩层效果实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
1、将遮罩层html代码与图片放在一个div
我是放在 .img_div里。
css;">
2、为图片及遮罩层添加样式
图片:relative
遮罩层:absolute
使两者样式重合。
鼠标不在图片上时,遮罩层不显示 .mask { opacity: 0; } 。
.img_div { margin: 20px 400px 0 400px; position: relative; } .mask { position: absolute; top: 0; left: 0; 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; }
效果图: