如何使用伪元素在图像悬停上创建 CSS 不可见黑色叠加？

CSS 悬停时不可见的黑色叠加

使用纯 CSS 确实可以在悬停时在图像上实现透明的黑色叠加。但是，由于定位和可见性问题，初始代码示例中提到的涉及使用覆盖 div 的方法可能不适合。

更有效的解决方案涉及使用伪元素。它的工作原理如下：

CSS 代码

.image {
  position: relative;
  /* Set dimensions as needed (or omit for responsiveness) */
  width: 400px;
  height: 400px;
}

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

.image:after {
  content: '\A'; /* Pseudo content to trigger browser rendering */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */
  opacity: 0; /* Initially invisible */
  transition: all 1s; /* Animation transition */
}

.image:hover:after {
  opacity: 1; /* Shows overlay on hover */
}

说明

1. 我们使用带有 class 的 div “图像”来包裹图像。它相对定位，以允许伪元素定位在其边界内。
2. 我们将子 img 元素设置为宽度为 100% 并垂直对齐到顶部。
3. 伪元素-element (.image:after) 绝对定位在图像 div 内。它最初的不透明度为 0，使其不可见。
4. 悬停 (.image:hover:after) 时，伪元素的不透明度更改为 1，使其可见并有效创建黑色叠加层。

额外功能

文本添加：
要将文本添加到悬停时的叠加层，您可以使用伪元素样式中的 content 属性。例如：

.image:after {
  content: 'Hover Text...'; /* Custom overlay text */
}

自定义：
您可以调整不透明度和过渡速度来修改可见性效果。此外，您可以添加背景图像或渐变来创建更复杂的叠加层。

以上是如何使用伪元素在图像悬停上创建 CSS 不可见黑色叠加？的详细内容。更多信息请关注PHP中文网其他相关文章！