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

下面我将详细讲解如何使用CSS实现鼠标移至图片上显示遮罩层的效果，步骤如下：

步骤一：HTML 结构

首先，我们需要在HTML文件中创建一个

元素并在其中添加一个 元素。如下所示:

<div class="wrapper">
  <img src="https://example.com/image.jpg" alt="Example Image" />
</div>

步骤二：为

添加样式

我们需要将

元素设置为相对定位。

.wrapper {
  position: relative;
  display: inline-block;
}

接着，我们创建一个

元素作为遮罩层并将其设置为绝对定位。遮罩层应该与 元素的大小相同。然后，我们需要将遮罩层设置为透明，并添加一个背景颜色以用于覆盖图像。我们还需要将其层叠顺序设置为 1，使其在图像上面显示。

.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1;
  transition: background-color 0.5s ease;
}

我们还可以为遮罩层添加文本或图标，以便提示用户单击图像。

.wrapper::before {
  content: "点击查看";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
  transition: background-color 0.5s ease;
}

步骤三：添加鼠标经过效果

当鼠标经过

元素时，我们需要更改遮罩层的透明度，以便其覆盖图像。

.wrapper:hover::before {
  background-color: rgba(0, 0, 0, 0.7);
}

如果我们要在遮罩层上显示图像标题，我们可以将其添加到图像下方的

元素中，并在鼠标悬停时显示。

<div class="wrapper">
  <img src="https://example.com/image.jpg" alt="Example Image" />
  <div class="caption">Example Title</div>
</div>

.caption {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  text-align: center;
  z-index: 2;
}

.wrapper:hover .caption {
  display: block;
}

这样我们就完成了鼠标移至图片上显示遮罩层效果的实现。

下面是一个完整的示例，你可以在这里查看效果：CSS遮罩层实例1。

另外，如果我们想制作一个图像的缩略图列表并在鼠标经过时显示遮罩层，则可以使用一个类似于下面的示例：

<ul class="images">
  <li>
    <div class="wrapper">
      <img src="https://example.com/image1.jpg" alt="Image 1" />
      <div class="caption">Image 1</div>
    </div>
  </li>
  <li>
    <div class="wrapper">
      <img src="https://example.com/image2.jpg" alt="Image 2" />
      <div class="caption">Image 2</div>
    </div>
  </li>
  ...
</ul>

.images {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.images li {
  margin: 10px;
  flex: 1 0 200px;
}

.images .wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

.images img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.images .caption {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  text-align: center;
  z-index: 2;
}

.images .wrapper:hover .caption {
  display: block;
}

.images .wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1;
  transition: background-color 0.5s ease;
}

.images .wrapper:hover::before {
  background-color: rgba(0, 0, 0, 0.7);
}

你可以在这里查看效果：CSS遮罩层实例2。

cssweb

赞 (0)

0 0 打赏 微信扫一扫 支付宝扫一扫

生成海报

纯css3实现鼠标经过图片显示描述的动画效果

上一篇 2023年6月10日

通用的二级菜单代码(css+javascript)

下一篇 2023年6月10日

相关文章

• css3实现超立体3D图片侧翻倾斜效果

  关于CSS3实现超立体3D图片侧翻倾斜效果，我们可以按照以下步骤进行实现： 步骤一：准备HTML结构 首先，我们需要准备一个HTML结构，用于容纳我们的图片以及超立体3D图片侧翻倾斜效果。示例如下： <div class="image-container"> <div class="image-wrap&quo…

  css 2023年6月10日

  000

• 使用Springboot打成jar包thymeleaf的问题

  下面是关于“使用Springboot打成jar包thymeleaf的问题”的完整攻略。 1. 为什么需要使用Springboot打成jar包thymeleaf的问题 当我们使用Springboot构建web项目时，我们通常会使用thymeleaf模板引擎来编写html页面。当项目开发完成后，我们需要将其部署到服务器上，使其可以在服务器上运行。这时候，如果我们…

  css 2023年6月9日

  000

• javascript关于运动的各种问题经典总结

  关于”javascript关于运动的各种问题经典总结”，我可以为你提供一份完整攻略，以下是具体内容： 一、运动的基本概念 运动是指物体在空间中沿着某条路径移动的过程，而在Web前端开发中，我们通常使用JavaScript来实现运动效果。 二、运动效果实现的方式 在Web前端开发中，我们有多种方式可以实现运动效果，其中包括： 1. 通过修改CSS样式来实现 这…

  css 2023年6月10日

  000

• 详解如何使用image-set适配移动端高清屏图片

  下面我将详细讲解如何使用image-set适配移动端高清屏图片。 什么是image-set image-set是CSS3提供的一个函数，能够根据屏幕分辨率的不同，自动选择最合适的图片。这里的图片可以是不同分辨率的同一张图片，也可以是不同大小但内容相近的多张图片。 image-set的语法 image-set语法如下： background-image: im…

  css 2023年6月9日

  000

• css制作网页中的虚线(border属性的使用方法)

  我来为您介绍一下CSS制作网页中的虚线的攻略。 border属性的使用方法 border属性是CSS中用来设置边框的一个属性，通过border可以为元素设置边框的宽度、颜色、样式等。其中边框的样式可以设置为虚线。 border-style属性 在border属性中有一个border-style属性，用来设置边框的样式。常见的样式有： solid：实线 das…

  css 2023年6月10日

  000

• 四种css 伪类选择器

  下面是详细讲解“四种CSS伪类选择器”的完整攻略，该过程中包含两条示例说明。 CSS伪类选择器是用于选择HTML元素的特殊选择器，根据元素在不同状态下的表现来选择元素，如链接状态、 hover 状态、focus状态、 nth-child 选择。在CSS中有四种常用的伪类选择器，分别是:link、:visited、:hover和:focus。 :link 和 …

  css 2023年6月9日

  000

• 原生js实现简单轮播图

  下面是原生JS实现简单轮播图的完整攻略。 1. 准备工作 在HTML文件中，需要定义一个容器作为轮播图的父元素，同时在其中添加轮播图片的子元素。例如，在以下代码中，容器的ID为slider，共有3张轮播图片。 <div id="slider"> <img src="1.jpg" alt="i…

  css 2023年6月10日

  000

• 网页制作经验分享:干净简洁的网页列表代码

  网页列表是网页设计中常用的元素之一，它可以用于展示文章、产品、服务等内容。干净简洁的网页列表可以提高用户体验和页面加载速度，下面是网页制作经验分享：干净简洁的网页列表代码的完整攻略，包括基本概念、使用方法、注意事项和示例说明。 1. 基本概念 网页列表是一种常用的网页元素，它可以用于展示文章、产品、服务等内容。网页列表通常包括标题、摘要、图片等信息，可以通过…

  css 2023年5月18日

  000