純粋な CSS を使用した画像ホバー オーバーレイ
HTML と CSS を使用すると、マウスをホバーしたときに画像に透明な黒色のオーバーレイを追加できます。それ。オーバーレイ要素を使用せずにこれを実現するには、代わりに疑似要素を使用することを検討してください。
画像を
相対的な位置とオプションの寸法を .image に割り当てます:
子 img 要素を幅 100% と垂直方向の配置に設定します。
を表示する疑似要素を作成します。オーバーレイ:
ホバー時にオーバーレイを表示します:
これで、カーソルを画像の上に置くと、透明な黒いオーバーレイがスムーズにフェードインします。
以上がCSS のみを使用して画像ホバー オーバーレイを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。