为图片添加遮罩层，并在鼠标悬停时切换遮罩层 css

最新推荐文章于 2024-07-29 11:26:16 发布

zzzzoey_

最新推荐文章于 2024-07-29 11:26:16 发布

阅读量1.2k

点赞数 2

分类专栏： html 前端 css 文章标签： css html

本文链接：https://blog.csdn.net/zzzzoe_/article/details/104256036

版权

本文介绍如何利用CSS创建一个具有两层遮罩层的图片效果。第一层遮罩显示背景色和文字，当鼠标悬停时，第二层遮罩层显现，同时隐藏第一层，实现遮罩层的切换交互。

摘要由CSDN通过智能技术生成

效果图需求：

第一层遮罩层，背景色带文字

第二层遮罩层，隐藏，鼠标悬停时切换隐藏状态，并把第一层遮罩层隐藏

html结构：

 <div class="imgItem">
     <img src="/public/Home/cases/case_01.jpg" />

    <!-- 第一层遮罩层 -->
     <div class="mask">
         <div class="mask-bg"></div>
         <div class="mask-content">
              <span>植物医生</span>
              <span>DR PLANT</span>
         </div>
     </div>


    <!-- 第二层遮罩层 -->
     <div class="mask">
         <div class="mask-bg-blue"