CSS は画像ホバー時に透明な黒いオーバーレイを作成できますか?

CSS を使用した画像ホバー上の黒の透明オーバーレイ: 徹底したアプローチ

クエリ:

画像の上にマウスを置いたときに表示される透明な黒いオーバーレイを作成できますか? CSS?

応答:

はい、CSS を使用して、画像ホバー時に透明な黒のオーバーレイ効果を実現できます。方法は次のとおりです:

疑似要素を使用する代替アプローチ:

オーバーレイ要素を使用する代わりに、画像上の疑似要素を利用できます。この方法により応答性が向上し、汎用性:

HTML:

<div class="image">
    <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

CSS:

.image {
  position: relative;
  /* Optional dimensions */
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}

.image:hover:after {
  opacity: 1;
}

説明:

• 位置: 相対位置.image 要素を使用すると、擬似要素はその親を基準にして自身を配置できます。
• vertical-align: top は、画像上のベースラインの位置合わせを修正します。
• :after 擬似要素は、次のオーバーレイを作成します。絶対位置と黒の半透明の背景。
• スムーズなトランジションのために不透明トランジションが適用されます。 hover.

ホバー上にテキストを追加する (オプション):

ホバー上にテキストを表示するには、擬似要素の content プロパティを目的のテキストに設定します。

.image:after {
  content: 'Hover Text';
  /* Other styling... */
}

以上がCSS は画像ホバー時に透明な黒いオーバーレイを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。