如何使用 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中文網其他相關文章！