疑似要素を使用して画像ホバーに CSS の非表示の黒いオーバーレイを作成する方法

ホバー時の CSS 非表示の黒オーバーレイ

純粋な CSS を使用すると、ホバー時に画像上に透明な黒のオーバーレイを実現することが確かに可能です。ただし、最初のコード サンプルで説明した、オーバーレイ div の使用を伴うアプローチは、位置と可視性の問題により適切ではない可能性があります。

より効果的な解決策には、疑似要素を利用することが含まれます。その仕組みは次のとおりです:

CSS コード

説明

1. クラスで div を使用します。 「image」で画像をラップします。擬似要素をその境界内に配置できるように相対的に配置されます。
2. 子 img 要素の幅が 100% になり、垂直方向が上部に配置されるようにスタイル設定します。
3. 擬似-要素 (.image:after) は画像 div 内に絶対的に配置されます。最初は不透明度 0 が指定されており、非表示になっています。
4. ホバーすると (.image:hover:after)、疑似要素の不透明度が 1 に変化し、可視になり、効果的に黒いオーバーレイが作成されます。
>

追加機能

テキストの追加:
ホバー時のオーバーレイにテキストを追加するには、擬似要素のスタイル内の content プロパティを使用できます。例:

カスタマイズ:
不透明度と遷移速度を調整して、可視性効果を変更できます。さらに、背景画像やグラデーションを追加して、より複雑なオーバーレイを作成できます。

以上が疑似要素を使用して画像ホバーに CSS の非表示の黒いオーバーレイを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。