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

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

Barbara Streisand

リリース： 2024-12-05 07:22:14

オリジナル

737 人が閲覧しました

How Can I Display Text Over an Image on Hover Using Only HTML and CSS?

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

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

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

画像とホバーテキストをコンテナ div でラップします。
画像とテキストの両方の周囲に div を作成します。ホバーすると表示されます。この div は画像と同じ高さと幅にする必要があります。
ホバーテキストをコンテナ div 内に絶対的に配置します:
CSS を使用して、ホバーテキストをコンテナ div 内に絶対的に配置します。画像内で正しく位置を揃えるには、位置を絶対値に設定し、上、下、左、右を 0 に設定します。最初に、可視性を非表示に設定し、不透明度を 0 に設定します。
ホバー効果を調整します:
最後に、コンテナ 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 サイトの他の関連記事を参照してください。