如何仅使用 CSS 创建图像悬停叠加？

使用纯 CSS 实现图像悬停叠加

使用 HTML 和 CSS，当鼠标悬停在图像上时，您可以向图像添加透明的黑色叠加层它。要在不使用覆盖元素的情况下实现此目的，请考虑使用伪元素。

用

包裹图像element:

<div class="image">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="如何仅使用 CSS 创建图像悬停叠加？" >
</div>

为 .image 指定相对定位和可选尺寸：

.image {
  position: relative;
  width: 200px;  /* Optional */
  height: 200px;  /* Optional */
}

将子 img 元素设置为宽度 100% 并垂直对齐。

.image img {
  width: 100%;
  vertical-align: top;
}

创建一个伪元素来显示叠加层：

.image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 1s;
}

使悬停时可见叠加层：

.image:hover:after {
  opacity: 1;
}

现在，当光标悬停在图像上时，透明的黑色叠加层将平滑淡入。

以上是如何仅使用 CSS 创建图像悬停叠加？的详细内容。更多信息请关注PHP中文网其他相关文章！