如何使用 HTML 和 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 lazy" src="/static/imghwm/default1.png" data-src="http://placehold.it/257x200.jpg" alt="如何使用 HTML 和 CSS 创建悬停效果以在图像上显示文本？" >
  <p class="img__description">This image looks super neat.</p>
</div>

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

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