HTML と CSS を使用して、ホバー時に画像の上にテキストを表示する方法

HTML と CSS を使用したホバー時のテキストの表示

ホバー時に画像の上にテキストを表示するという探求の中で、最初は画像スプライトに頼りました。ベースのソリューション。ただし、実際のテキストを使用したよりクリーンなアプローチを模索します。

解決策は、画像と説明の両方のラッパーとして div 要素を使用することです。この div は画像と同じ寸法を持つ必要があります。 CSS を操作することで、div 上にマウスを移動したときの説明の表示/非表示を決定できます。

この効果を実現するための簡略化されたコード スニペット:

.image-wrapper {
  position: relative;
  height: [Image height];
  width: [Image width];
}

.image-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: [Description background color];
  color: [Description text color];
  visibility: hidden;
  opacity: 0;
  transition: visibility .2s, opacity .2s;
}

.image-wrapper:hover .image-description {
  visibility: visible;
  opacity: 1;
}

HTML 内:

<div class="image-wrapper">
  <img src="image.jpg" />
  <p class="image-description">This is the image description.</p>
</div>

以上がHTML と CSS を使用して、ホバー時に画像の上にテキストを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。