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

画像ホバー時にテキストを表示するにはどうすればよいですか?

画像をホバーしたときに説明情報を表示することは一般的な要件です。この記事では、HTML と CSS を使用してこの機能をエレガントに実装する方法について説明します。

問題

多くの開発者は、画像スプライトとホバーを使用してこの機能を実装します。ただし、この方法は理想的とは言えず、正確な効果を生み出すのが困難です。したがって、この記事では、画像ではなく実際のテキストを使用する方法を説明します。

解決策

この機能を実現するのは簡単です。画像とホバーの説明情報を画像と同じサイズの div でラップするだけです。次に、CSS を使用して、div にホバーしたときに説明を表示します。

コード例

以下は HTML と CSS を使用していますこの機能を実装するコード例:

HTML:

<div class="img__wrap">
  <img class="img__img" src="image.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

CSS :

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.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;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

上の例: "

<div class="img__wrap">

画像と説明情報を 1 つにラップしますdiv の場合、この div のサイズは画像と同じです (高さ 200 ピクセル、幅 257 ピクセル)。

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

ホバーする前に説明情報を div の中央に配置します。

visibility: hidden;
opacity: 0;

div にカーソルを合わせると、 、説明情報

を表示します。

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