CSS实现鼠标移至图片上显示遮罩层及文字效果

最新推荐文章于 2024-01-18 15:38:53 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-01-18 15:38:53 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.csdn.net/Maxueyingying/article/details/134250310

该博客介绍前端实现图片遮罩层显示效果的方法。先将遮罩层html代码与图片放在一个div，接着为图片及遮罩层添加样式，让两者样式重合，鼠标不在图片上时遮罩层不显示，最后使用hover改变透明度使遮罩层显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

在这里插入图片描述

1、将遮罩层html代码与图片放在一个div

我是放在 .proBK里。

  <div class="proBK">
        <img src="../../assets/image/taskPro.png" class="proImg">
        <div class="imgText">
          <h5>用户在线发布任务</h5>
        </div>
      </div>

2、为图片及遮罩层添加样式

图片：relative

遮罩层：absolute

使两者样式重合。

鼠标不在图片上时，遮罩层不显示 .imgText{ opacity: 0; } 。

.proBK {
    width: 380px;
    height: 260px;
    margin-bottom: 20px;
    position: relative;
}
  .proImg {
      width: 100%;
      height: 100%;
    }
  .imgText{
      position: absolute;
      background: rgba(106, 64, 155, 0.8);
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      cursor: pointer;
      opacity: 0;
      color: #ffffff;
      text-align: center;
}
 h5 {
      padding-top: 103px;
      font-size: 18px;
}
  .proBK .imgText:hover {
    opacity: 1;
  }

3、使用hover

改变透明度，使遮罩层显示。

 .proBK .imgText:hover {
    opacity: 1;
  }