CSSを使用してホバー時の画像にテキストを含む黒の透明なオーバーレイを追加する方法

CSS を使用してホバー時の画像に黒色の透明なオーバーレイを追加する

CSS を使用して、ホバー時の画像上に黒色の透明なオーバーレイを作成できます。これを達成するための包括的なガイドは次のとおりです。

疑似要素の使用

囲まれた img 要素上のオーバーレイ要素の問題を回避するには、その要素に疑似要素を挿入します。場所。 img 要素を次のようにラップします:

<div class="image">
  <img src="image.jpg" alt="" />
</div>

CSS を構成します:

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image:after {
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}
.image:hover:after {
  opacity: 1;
}

ホバー時にテキストを追加

簡単にするために、テキストを含めます擬似要素のコンテンツとしてvalue:

.image:after {
  content: 'Your Text';
  color: #fff;
}

または、独自のテキスト表示用に data-* 属性にテキストを設定します:

.image:after {
  content: attr(data-content);
  color: #fff;
}

<div data-content="Text to Display" class="image">
  <img src="image.jpg" alt="" />
</div>

オーバーレイとテキストの組み合わせ

個別のスタイルにより、要素を独立して配置できます:

.image:after, .image:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.image:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.image:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 0;
  padding: 4px 10px;
  text-align: center;
  background: #f00;
  box-sizing: border-box;
}
.image:hover:after, .image:hover:before {
  opacity: 1;
}

以上がCSSを使用してホバー時の画像にテキストを含む黒の透明なオーバーレイを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。