给图片动态添加半透明遮罩效果

淩亂°似流年 2022-06-01 02:51 223阅读 0赞

当鼠标hover到图片上时，出现半透明遮罩效果，移除hover则取消半透明遮罩效果

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .demo{
                width:425px;
                height:283px;
                position: relative;
    			overflow:hidden;
            }
    		demo img{
    		width:100%;
    		}
            .demo i{
                position:absolute;
                top:0;
                width:100%;
                height:100%;
                background-color: rgba(251,251,251,0);
                transition: background-color 0.5s;
            }
            .demo:hover i{
                background-color: rgba(251,251,251,0.3);
            }
        </style>
    </head>
    <body>
    <div class="demo">
            <img src="2.jpg">
            <i></i>
    </div>
    </body>
    </html>

查看示例

[这里][Link 1]

[Link 1]: http://htmlpreview.github.io/?https://github.com/jialuoJiang/CSS3/blob/master/shade.html

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关图片遮罩效果

欢迎访问我的博客地址 : [博客地址][Link 1] **鼠标移入容器半遮罩层从下方逐渐移上去** 话不多说，直接上代码! <!DOCTYPE html...

小咪咪/ 2024年04月18日 16:53/ 0 赞/ 85 阅读

相关使用音视频剪辑技术实现遮罩剪辑叠加透明效果

使用音视频剪辑技术实现遮罩剪辑叠加透明效果音视频剪辑制作中，常常需要使用遮罩（mask）来实现一些有趣的效果。例如，在视频中添加Logo水印、将视频镂空并显示背景图片等等。

我会带着你远行/ 2024年03月17日 16:17/ 0 赞/ 86 阅读

相关前端遮罩效果

var layer=$('<div id="layer" style="width:1999px ;height: 1999px;position: absolute;

你的名字/ 2023年01月08日 02:21/ 0 赞/ 217 阅读

相关 css3、scss给图片加遮罩层

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

﹏ヽ暗。殇╰゛Y/ 2022年10月07日 11:46/ 0 赞/ 214 阅读

相关 jq给页面添加覆盖层遮罩

先引入jq代码，然后代码如下： $(function(){ var docHeight = $(document).height(); //获

「爱情、让人受尽委屈。」/ 2022年08月11日 05:58/ 0 赞/ 195 阅读

相关 jquery遮罩层效果

例如点击登录后弹出一个遮罩层“正在登录，请稍后....”，此时用户是不能操作的。代码如下：前提先引入 jquery-xxxx.min.js、jquery.blockUI.j

朴灿烈づ我的快乐病毒、/ 2022年08月09日 00:47/ 0 赞/ 296 阅读

相关给图片动态添加半透明遮罩效果

当鼠标hover到图片上时，出现半透明遮罩效果，移除hover则取消半透明遮罩效果 <!DOCTYPE html> <html lang="en">

淩亂°似流年/ 2022年06月01日 02:51/ 0 赞/ 224 阅读

相关实现遮罩效果

<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < meta name= "vi

客官°小女子只卖身不卖艺/ 2022年05月25日 02:46/ 0 赞/ 265 阅读

相关如何给背景图片加颜色遮罩

方法一：通过定位叠加（注意层级关系） <style> .block { position: relativ

今天药忘吃喽~/ 2022年01月13日 10:25/ 0 赞/ 324 阅读

相关给原生html中添加水印遮罩层

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

落日映苍穹つ/ 2021年09月21日 18:24/ 0 赞/ 435 阅读