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日

相关文章

• 非常流行的所谓的气泡窗口

  关于“非常流行的所谓的气泡窗口”的攻略，我为你列出了以下步骤： 什么是气泡窗口 一种常见的 UI 技巧是将小型气泡窗口添加到网页中，以增强交互。这些气泡窗口可以在几乎任何地方出现，并为用户提供有用的信息。气泡窗口通常用于错误消息、提示、警告或更多信息的详细说明。 如何创建气泡窗口 使用 CSS 代码和 JavaScript 可以相对较容易地创建气泡窗口。 主…

  css 2023年6月10日

  000

• 基于jQuery UI CSS Framework开发Widget的经验

  下面是详细讲解“基于jQuery UI CSS Framework开发Widget的经验”的完整攻略。 1. 确认jQuery UI CSS Framework版本 在开发Widget之前，需要确认使用的是哪个版本的jQuery UI CSS Framework。在开发中，建议使用最新版本，因为最新版本通常修复了已知的问题并具有最佳的性能。 2. 加载jQu…

  css 2023年6月10日

  000

• CSS属性之定位属性（图文详解）

  CSS属性之定位属性（图文详解） CSS定位属性会对元素的显示位置进行控制，包括position、top/bottom和left/right等属性。本文将为大家详细介绍CSS定位属性，以及如何正确应用它们。 position属性 position属性用来指定元素在文档中的定位方式。常用的值有4种： static（默认）：元素在文档中遵循正常流程布局，不进行特…

  css 2023年6月9日

  000

• 子Div使用Float后撑开父Div的几种方法

  下面是子Div使用Float后撑开父Div的几种方法的详细讲解。首先，我们先来看一下使用Float属性对子元素进行布局时可能会遇到的问题。 当我们为子Div设置了Float属性后，子Div会脱离文档流，父Div的高度会失效，导致父Div无法完全包含所有的子元素。这时，我们就需要对父Div进行特殊处理，以保证它能够正确地包含子元素。 方法一：使用伪元素清除浮动…

  css 2023年6月10日

  000

• 纯CSS打造的导航菜单(附jquery版)

  好的。在这里，我将为您详细讲解“纯CSS打造的导航菜单(附jquery版)”的完整攻略。该攻略包含了该导航菜单的制作过程以及如何将其转化成jquery版的导航菜单。 制作纯CSS导航菜单 第一步：HTML结构 首先，我们需要创建一个含有ul和li元素的HTML结构。 代码如下： <nav> <ul> <li><a h…

  css 2023年6月9日

  000

• gif可以当成css的背景图片与普通图片是一样的

  首先，需要明确的是GIF可以作为CSS的背景图片，它与其他格式的图片没有什么本质区别。只是相对于静态的背景图片，GIF可以通过其帧动画特性展现动态效果，感官上更加生动有趣。 要在CSS中使用GIF作为背景图片，可以按照如下步骤操作: 在CSS文件中声明一个样式类，例如：.gif-bg： .gif-bg { background-image: url(‘./y…

  css 2023年6月9日

  000

• 一个JavaScript的求爱小特效

  现在我将详细讲解如何实现一个JavaScript的求爱小特效。 实现思路 我们可以利用HTML、CSS和JavaScript来实现这个小特效。具体实现过程如下： 首先，在HTML文件中添加两个input标签分别用于输入男方和女方的名字，以及一个button标签用于触发求爱动画； 然后，使用CSS样式来美化输入框和按钮的样式； 接着，使用JavaScript为…

  css 2023年6月11日

  000

• 如何利用css var函数让你的组件样式输出规范样式API可定制性更高

  如何利用CSS var函数让你的组件样式输出规范样式API可定制性更高 CSS var函数是CSS3中的新特性，可以用于定义和使用自定义属性，可以让你的组件样式输出规范，API可定制性更高。以下是实现CSS var函数的步骤： 定义自定义属性 使用var函数引用自定义属性 通过JavaScript动态修改自定义属性 以下是两个示例说明： 示例1：使用CSS …

  css 2023年5月18日

  000