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日

相关文章

• CSS教程关于css框架网页设计

  下面是关于使用CSS框架进行网页设计的完整攻略： 简介 CSS框架是一种能够简化网页设计过程的工具，包括预设的CSS样式和设计模板等，可以节省设计时间并提高整体设计效率。常见的CSS框架有 Bootstrap、Semantic UI 和 Foundation 等。 步骤一：引入CSS框架 使用CSS框架的第一步是在HTML文件中引入框架的CSS文件。可以从官…

  css 2023年6月9日

  000

• 清理CSS样式的几个有用工具

  清理CSS样式是Web开发过程中非常重要的一步，可以有效地减少代码冗余，提高网页加载速度和性能。以下将介绍几个常用的CSS样式清理工具，帮助我们快速、简单地清理CSS样式。 1. CSS Purge CSS Purge是一款小巧、简单的CSS样式清理工具，用来删除未使用的CSS。实现原理是通过解析HTML文件，在运行时分析CSS文件中的选择器和样式规则，然后…

  css 2023年6月9日

  000

• ES6使用export和import实现模块化的方法

  ES6使用export和import关键字实现模块化是JavaScript中常用的模块化方案之一。在本篇攻略中，我们将通过详细讲解来了解这一方案的具体实现过程。 一、ES6中简单模块化的实现 在ES6中实现模块化，我们需要用到export和import两个关键字。我们可以通过export关键字将模块中需要对外暴露的内容暴露出去，然后在其他的地方通过impor…

  css 2023年6月9日

  000

• 在sql Server自定义一个用户定义星期函数

  在SQL Server中自定义一个用户定义星期函数，可以使用以下步骤： 1. 创建一个新的SQL Server项目 在SQL Server Management Studio中，选择“文件”->“新建”->“项目”->“SQL Server”->“SQL Server Database项目”。 2. 添加新的用户定义函数 在项目中，右…

  css 2023年6月9日

  000

• 5个ChatGPT功能帮助你提升日常编码效率

  5个ChatGPT功能帮助你提升日常编码效率 ChatGPT是一款基于GPT-3模型的人工智能对话机器人，可以为开发人员提供多种帮助，提高日常编码效率。下面介绍5个ChatGPT功能帮助你提升日常编码效率的完整攻略。 1. 代码自动生成 ChatGPT可根据您提供的描述自动生成代码。例如，您可以告诉ChatGPT您需要一个函数来计算一个数字列表中数字的平均值…

  css 2023年6月9日

  000

• Div+CSS对HTML的table表格定位用法实例

  这是一个“Div+CSS对HTML的table表格定位用法”的攻略，主要介绍如何使用CSS的定位属性来精确定位和布局HTML中的table表格。下面将会逐步介绍内容。 HTML中的表格 HTML中的表格是页面设计中经常用到的元素之一，也是前端开发中常见的问题，常用于放置数据。 <table id="my-table"> &lt…

  css 2023年6月9日

  000

• 移动端使用 rem 单位时 css sprites 定位问题的解决

  移动端使用 rem 单位时 css sprites 定位问题的解决，主要是在使用 CSS Sprites 图片中，使用 rem 单位来进行布局时，会产生定位的偏移问题。针对这个问题，我们可以采用如下方法： 1. 确定 sprite 图片的根字号大小 首先，需要确定整个 sprite 图片的根字号大小。推荐使用 16px 的字号大小作为整个 sprite 的根…

  css 2023年6月9日

  000

• CSS3教程:新增加的结构伪类

  让我详细讲解一下“CSS3教程：新增加的结构伪类”。 什么是结构伪类 结构伪类是一种CSS3新增加的选择器，用于选择在特定位置的元素。它基于元素在DOM结构中的位置来选择元素，因此被称为结构性伪类。 CSS3新增加的结构伪类 CSS3中新增加的结构伪类包括：:nth-child, :nth-last-child, :nth-of-type, :nth-las…

  css 2023年6月9日

  000