欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css鼠标悬浮图片遮罩效果实现代码

程序员文章站 2022-04-16 22:05:49
...

本文主要和大家分享css鼠标悬浮图片遮罩效果实现代码,希望能帮助到大家。

css

p>p{    background: rgba(255, 255, 255, 0);    transition: background 0.3s linear;}p:hover>p{    background: rgba(228, 228, 228, 0.29);}

html

<p style="width:200px;height:200px;position: absolute;">
    <img src="img/img.jpg" style="width: 100%;height: 100%;"/>
    <p style="position: absolute;width: 100%;height: 100%;top: 0;"></p></p>

相关推荐:

javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)_图象特效

以上就是css鼠标悬浮图片遮罩效果实现代码的详细内容,更多请关注其它相关文章!