ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML と CSS を使用して、画像上にテキストを表示するホバー効果を作成するにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-12-14 19:08:19147ブラウズ

How Can I Create a Hover Effect to Display Text Over an Image Using HTML and 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" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。