CSS实现鼠标移至图片上显示遮罩层效果-前端开发

下面我将详细讲解如何使用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。

步骤一：HTML 结构

步骤二：为 添加样式

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

基础教程推荐

步骤二：为
添加样式