如何使用 HTML 和 CSS 创建悬停效果以在图像上显示文本？-css教程-PHP中文网

如何使用 HTML 和 CSS 创建悬停效果以在图像上显示文本？

Barbara Streisand

发布： 2024-12-14 19:08:19

原创

147 人浏览过

How Can I Create a Hover Effect to Display Text Over an Image Using HTML and CSS?

使用 HTML 和 CSS 将鼠标悬停在图像上显示文本

创建悬停效果以在图像上显示文本可能看起来是一项艰巨的任务，但是在 HTML 和 CSS 的帮助下，这是一个令人惊讶的简单

问题：功能有限的图像精灵

许多开发人员最初求助于使用图像精灵，通过移动背景图像位置来显示不同的悬停状态。然而，这种方法有局限性，因为它不允许使用实际文本。

解决方案：透明图像叠加

为了达到预期的效果，我们可以将图像和悬停文本包装在与图像尺寸完全相同的单个容器中。使用CSS，我们将悬停文本绝对定位在此容器内，并默认使其不可见。

.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
}

登录后复制

当用户将鼠标悬停在容器上时，我们使用CSS悬停逐渐显示悬停文本：

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

登录后复制

HTML 标记

<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

登录后复制

通过这种技术，您可以轻松地显示悬停在图像上的动态文本，为您的网站带来精美的互动体验。

以上是如何使用 HTML 和 CSS 创建悬停效果以在图像上显示文本？的详细内容。更多信息请关注PHP中文网其他相关文章！