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; }
説明:
ホバー上にテキストを追加する (オプション):
ホバー上にテキストを表示するには、擬似要素の content プロパティを目的のテキストに設定します。
.image:after { content: 'Hover Text'; /* Other styling... */ }
以上がCSS は画像ホバー時に透明な黒いオーバーレイを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。