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

実際のテキストを使用してホバー時にテキストを表示

画像スプライトの代わりに実際のテキストを使用して、ホバー時に画像上にテキストを表示できます。方法は次のとおりです。

ホバー時に表示する画像と説明をコンテナ div 内でラップします。この div は画像と同じ寸法である必要があります。

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

次の CSS をコンテナ div (.img__wrap) に割り当てます。

.img__wrap {
  position: relative;
  height: [Set to match image height];
  width: [Set to match image width];
}

テキストの説明をコンテナ div 内に絶対に配置します(.img__description).

.img__description {<br> 位置: 絶対;<br> トップ: 0 ;<br> 下: 0;<br> 左: 0;<br> 右: 0;<br> 背景: rgba(0, 0, 0, 0.7);<br> カラー: #fff;<br> 可視性: 非表示;<br> 不透明度: 0;<br>}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></div>
</div>

Make the text description visible and opaque on hover by adding the following CSS:

<div>

ログイン後にコピー

このソリューションでは、ユーザーがカーソルを置いたときに画像の上にテキストの説明が表示されます終わりました。

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