介绍 & lt; div 类=癷mg_div"比;
,,,& lt; img src=https://www.yisu.com/zixun/薄?图片/paella-dish.jpg”>
这篇文章主要介绍了CSS如何实现鼠标移至图片上显示遮罩层效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
1,将遮罩层html代码与图片放在一个div
我是放在.img_div里。
的食物图片
2,为图片及遮罩层添加样式
图片:相对
遮罩层:绝对
使两者样式重合。
鼠标不在图片上时,遮罩层不显示.mask{不透明度:0;}.
3,使用盘旋
改变透明度,使遮罩层显示。
效果图:
感谢你能够认真阅读完这篇文章,希望小编分享的“CSS如何实现鼠标移至图片上显示遮罩层效果”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
