4、滤镜、遮罩层的隐藏与显示（html、css）

高杉夏

已于 2022-09-09 09:58:53 修改

阅读量469

点赞数 1

文章标签：前端 html css

于 2022-09-09 09:57:54 首次发布

本文链接：https://blog.csdn.net/weixin_47886206/article/details/126776991

版权

需求：当鼠标进入，图片的滤镜消失，随即产生过渡动画，遮罩层文字显示，反之逆操作

重点：在遮罩层的显示与隐藏方面，使用 opacity 不用 display，否则 过渡延迟 会失效

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .pic{
            position: relative;
            width: 300px;
            height: 400px;
            margin: 100px auto;
            overflow: hidden;
        }
        img{
            /*  object-fit: cover 在固定了图片的宽高的情况下，让图片自适应填充区间 */
            object-fit: cover;

            /* 为图片添加滤镜：灰色滤镜 */
            filter: grayscale(100%);
        }
        .mask{
            position: absolute;
            left:0;
            top:0;
            width: 100%;
            height: 100%;

            /* 当  opacity: 0; 时，遮罩层隐藏不见 */
            opacity: 0;

            /* 过渡延迟 */
            transition: all 0.28s ease-in 0.1s;
        }
        .mask p{
            text-align: center;
            line-height: 400px;
            color: white;
            font-size: 30px;
        }

        /* 当鼠标进入 .pic 父盒子区域时,img 的滤镜效果消失 */
        .pic:hover img{
            filter: grayscale(0);
        }

        /* 当鼠标进入 .pic 父盒子区域时, 遮罩层显示 */
        .pic:hover .mask{
            opacity: 0.5;
        }

    </style>
</head>
<body>
    <div class="pic">
        <img src="img/d1.jpg" alt="">
        <!-- 遮罩层 -->
        <div class="mask">
            <p>我是遮罩层</p>
        </div>
    </div>
</body>

补充：滤镜