HTML と CSS を使用して、画像上にテキストを表示するホバー効果を作成するにはどうすればよいですか?

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

画像上にテキストを表示するホバー効果を作成するのは、気が遠くなる作業のように思えるかもしれませんですが、HTML と CSS を使用すると、驚くほど簡単になります。 process.

問題: 機能が制限された画像スプライト

多くの開発者は、最初は背景画像の位置をずらすことでさまざまなホバー状態を表示する画像スプライトの使用に頼っています。ただし、このアプローチには実際のテキストを使用できないため、制限があります。

解決策: 透明な画像オーバーレイ

目的の効果を実現するには、次のようにします。画像とホバー テキストの両方を、画像とまったく同じサイズの単一のコンテナ内にラップできます。 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>

これでこのテクニックを使用すると、ホバー時に画像の上に動的なテキストを簡単に表示でき、Web サイトに洗練されたインタラクティブなタッチを与えることができます。

以上がHTML と CSS を使用して、画像上にテキストを表示するホバー効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。