ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS のみを使用して画像ホバー オーバーレイを作成するにはどうすればよいですか?

CSS のみを使用して画像ホバー オーバーレイを作成するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-15 09:32:13
オリジナル
411 人が閲覧しました

How Can I Create Image Hover Overlays Using Only CSS?

純粋な CSS を使用した画像ホバー オーバーレイ

HTML と CSS を使用すると、マウスをホバーしたときに画像に透明な黒色のオーバーレイを追加できます。それ。オーバーレイ要素を使用せずにこれを実現するには、代わりに疑似要素を使用することを検討してください。

画像を

でラップします。 element:

相対的な位置とオプションの寸法を .image に割り当てます:

子 img 要素を幅 100% と垂直方向の配置に設定します。

を表示する疑似要素を作成します。オーバーレイ:

ホバー時にオーバーレイを表示します:

これで、カーソルを画像の上に置くと、透明な黒いオーバーレイがスムーズにフェードインします。

以上がCSS のみを使用して画像ホバー オーバーレイを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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