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日

相关文章

• Webpack中loader打包各种文件的方法实例

  下面来详细讲解 Webpack 中 loader 打包各种文件的方法实例。 1. 什么是 loader？ 在使用 Webpack 时，我们通常需要对各种文件进行打包，比如 CSS、图片、字体、Markdown 等等。而这些文件在打包时，都需要通过 loader 进行处理。 Loader 是 Webpack 中比较重要的概念，它可以将非 JavaScript …

  css 2023年6月10日

  000

• CSS网页设计时关于字体大小的设计

  当进行CSS网页设计时，字体大小的设计是一项非常关键的任务，因为网页中的文字是与用户直接进行交互的重要元素之一。以下是关于CSS网页设计时字体大小的设计完整攻略： 1. 确定文字的类型和风格 在进行字体大小的设计之前，我们需要先确定网页中所使用的文本的类型和风格。例如，如果你设计的是一篇新闻网站，你可能需要使用一种正式的、易读的字体；而如果你设计的是一款游戏…

  css 2023年6月9日

  000

• 多列等高的CSS实现代码

  实现多列等高的布局是Web开发中经常遇到的问题之一，这里提供一种使用CSS实现的方案。 首先，我们需要了解两种CSS属性：display和float。 display属性决定元素的显示方式，我们可以使用display: flex; 属性使元素变成一个flex容器，从而可以轻松控制元素的位置和大小。float属性用于定义元素相对于其容器所在的方向浮动，可以让元…

  css 2023年6月10日

  000

• Vue中的基础过渡动画及实现原理解析

  对于“Vue中的基础过渡动画及实现原理解析”的完整攻略，我会分为以下四个部分进行详细讲解。 一、动画介绍 在Vue中，你可以使用过渡动画来实现页面元素的动态效果。通过过渡动画，你可以让页面元素在增加、删除或更新时呈现出渐进式的动画效果。 Vue中提供了<transition>组件作为过渡动画的载体。通过在该组件中配置不同的过渡模式，你可以实现不同…

  css 2023年6月10日

  000

• CSS 样式表中引用图片地址在各浏览器中的差异

  引用图片是网页设计中常用的技巧。CSS 样式表中引用图片地址在不同的浏览器中有不同的差异，这可能会导致网页在某些浏览器下无法正常显示。 以下是一些可能遇到的问题以及解决方案： 1. 相对路径和绝对路径的使用 在 CSS 样式表中引用图片时，可以使用相对路径或绝对路径。相对路径是相对于 CSS 文件的路径，而绝对路径是完整的 URL 地址。 示例： backg…

  css 2023年6月9日

  000

• 详解JavaScript中的坐标和距离

  请看下面的完整攻略。 详解JavaScript中的坐标和距离 在JavaScript编程中，经常需要计算元素的坐标和距离信息。这些信息是布局、交互和动画等方面的重要基础，必须掌握。 坐标的获取 在HTML文档中，每个元素都有一个位置和大小，可以通过offsetLeft、offsetTop、offsetWidth、offsetHeight属性获取。 例如，下面…

  css 2023年6月10日

  000

• CSS样式表优化更整洁而简短

  下面是“CSS样式表优化更整洁而简短”的完整攻略： 1. 压缩CSS文件 压缩CSS文件是优化CSS样式表的一种简单有效的方法。在压缩CSS文件时，可以将原CSS文件中的空格、回车和换行等无用字符删除，从而减小文件大小。这不仅可以减小CSS文件的加载时间，还可以使样式表更加整洁，缩短了代码行数，提高了开发效率。 举个例子，下面是一段未压缩的CSS代码： bo…

  css 2023年6月10日

  000

• iOS移动端(H5)alert/confirm提示信息去除网址(URL)

  当我们在iOS移动端开发H5页面时，使用alert或confirm弹出提示信息时，会默认在弹窗的消息内容底部显示一个带有网址的链接，这显然并不是我们所期望的，因此，我们需要对其进行去除。 下面是具体的攻略，分以下几个步骤： 1. 创建一个全局样式 首先，我们需要在头部的<head>标签内添加一个全局的CSS样式，如下所示： <head&gt…

  css 2023年6月11日

  000