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

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

Web デザインでは、ユーザーが画像の上にホバーしたときに表示される説明テキストを追加すると、ユーザーエクスペリエンス。このテキストは画像に関する貴重な情報を提供し、インタラクティブで魅力的なブラウジング エクスペリエンスを作成します。

HTML と CSS のみを使用してこの効果を実現するのは比較的簡単です。これを段階的に行う方法は次のとおりです。

1. 画像とホバー テキストをコンテナ div でラップします。
   画像とテキストの両方の周囲に div を作成します。ホバーすると表示されます。この div は画像と同じ高さと幅にする必要があります。
2. ホバー テキストをコンテナ div 内に絶対的に配置します:
   CSS を使用して、ホバー テキストをコンテナ div 内に絶対的に配置します。画像内で正しく位置を揃えるには、位置を絶対値に設定し、上、下、左、右を 0 に設定します。最初に、可視性を非表示に設定し、不透明度を 0 に設定します。
3. ホバー効果を調整します:
   最後に、コンテナ div でホバー効果を使用して、ホバー テキストを表示します。ユーザーが画像上にマウスを移動すると、可視性に可視、不透明度を 1 に設定することで、ホバー テキストが表示され、完全に不透明になります。

 クイック リセット</em>/</p><ul><li>{<br>マージン: 0;<br>パディング: 0;<br>ボーダー: 0;<br>}</li></ul><p>/<em> 関連するスタイル </em>/<br>.img__wrap {<br> 位置: 相対;<br> 高さ: 200px;<br> 幅: 257px;<br>}</p><p>.img__description {<br> 位置: 絶対;<br> 上部: 0;<br> 下: 0;<br> 左: 0;<br> 右: 0;<br> 背景: rgba(29, 106, 154, 0.72);<br> カラー: #fff;<br> 可視性: 非表示;<br> 不透明度: 0;</p><p>/<em>トランジション効果。不要 </em>/<br> 遷移: 不透明度 .2s、可視性 .2s;<br>}</p><p>.img__wrap:hover .img__description {<br> 可視性: 可視;<br> 不透明度: 1;<br>}

 <img class="img__img" src="http://placehold.it/257x200.jpg" /><br> <p></div>

このアプローチでは、説明テキストが画像上に効果的にオーバーレイされ、ユーザーがマウスを移動したときにテキストが表示されます。画像スプライトを使用せずに画像を作成できます。

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

このウェブサイトの声明

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