ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS は画像ホバー時に透明な黒いオーバーレイを作成できますか?

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

Linda Hamilton
リリース: 2024-12-10 16:44:11
オリジナル
361 人が閲覧しました

Can CSS Create a Transparent Black Overlay on Image Hover?

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

クエリ:

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

応答:

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

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

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

HTML:

<div class="image">
    <img src="image.jpg" 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート