如何使用 CSS 在悬停时向图像添加带有文本的黑色透明覆盖层？-css教程-PHP中文网

如何使用 CSS 在悬停时向图像添加带有文本的黑色透明覆盖层？

Barbara Streisand

发布： 2024-12-07 10:36:17

原创

644 人浏览过

How to Add a Black Transparent Overlay with Text to Images on Hover Using CSS?

使用 CSS 在悬停时为图像添加黑色透明叠加

使用 CSS 可以在悬停时在图像上创建黑色透明叠加。以下是完成此操作的综合指南：

使用伪元素

为了避免封闭的 img 元素上的覆盖元素出现问题，您可以在其地方。将 img 元素包装如下：

<div class="image">
  <img src="image.jpg" alt="" />
</div>

登录后复制

配置 CSS：

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image:after {
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}
.image:hover:after {
  opacity: 1;
}

登录后复制

在悬停时添加文本

为简单起见，请包含文本作为伪元素的内容值：

.image:after {
  content: 'Your Text';
  color: #fff;
}

登录后复制

或者，在 data-* 属性中设置文本以实现唯一的文本显示：

.image:after {
  content: attr(data-content);
  color: #fff;
}

登录后复制

<div data-content="Text to Display" class="image">
  <img src="image.jpg" alt="" />
</div>

登录后复制

组合叠加和文本

单独的样式允许独立定位元素:

.image:after, .image:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.image:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.image:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 0;
  padding: 4px 10px;
  text-align: center;
  background: #f00;
  box-sizing: border-box;
}
.image:hover:after, .image:hover:before {
  opacity: 1;
}

登录后复制

以上是如何使用 CSS 在悬停时向图像添加带有文本的黑色透明覆盖层？的详细内容。更多信息请关注PHP中文网其他相关文章！