CSS を使用してホバー時の画像に透明なオーバーレイを追加する方法

CSS を使用してホバー時に画像に透明なオーバーレイを追加する方法

CSS を使用してホバー時に画像に透明な黒いオーバーレイを追加することは、注意を引くために使用されるテクニックです画像の特定の領域に適用したり、微妙なインタラクティブ効果を作成したりできます。一見簡単そうに見えますが、CSS ボックス モデルの内部動作に精通していないと課題が生じる可能性があります。

この説明では、提供されたコード スニペットが目的を達成できない理由を詳しく掘り下げていきます。

問題の理解

元のコードは、次の組み合わせを使用してオーバーレイ効果を達成しようとします。 divs と :hover 疑似クラス。ただし、このアプローチにはいくつかの問題があります。

1. 囲まれた img 要素: CSS 擬似要素は、div などの他の要素内に囲まれた img 要素に直接追加できません。
2. 位置と表示: オーバーレイ要素が誤って display: none を使用しています。不透明度の代わりに非表示にするには: 0;または、visibility: hidden;.

擬似要素を使用したオーバーレイの実装

オーバーレイ効果を適用するには、個別の div の代わりに CSS 擬似要素を使用する方が現実的です。疑似要素を使用すると、接続されている要素にシームレスに統合できるため、このシナリオに最適です。

1. Wrap the img: 前述したように、疑似要素は次のことができます。 img 要素自体に直接配置することはできません。したがって、親要素内で img をラップする必要があります。
2. 親要素の位置: 親要素 (この場合は画像) に定義された位置 (通常は相対または絶対) があることを確認します。オーバーレイの参照点として機能します。
3. :after 疑似要素を作成します: 追加:after 疑似要素を親要素 (画像) に追加し、オーバーレイ効果に必要な内容、位置、背景色を設定します。
4. トランジション: オーバーレイを表示させるにはホバーすると、:after 擬似要素にtransition プロパティを含めて、時間の経過とともにどのように変化するかを制御します。
5. トリガーoverlay: :hover 擬似クラスを使用して、:after 擬似要素の不透明度または可視性を変更することでオーバーレイの外観をトリガーします。

テキスト付きオーバーレイ

するにはホバー時にオーバーレイにテキストを追加するには、擬似要素の content プロパティを使用して、必要なテキスト コンテンツを指定できます。 attr(data-content) を利用すると、親要素に data-content 属性を追加することで、各画像に固有のテキストを作成できます。

結論

CSS のみを使用してホバー時の画像に透明なオーバーレイ効果を適用するには、CSS ボックス モデルと擬似要素の強力な機能を理解する必要があります。この記事で説明したテクニックを実装すると、画像に対するユーザーのエンゲージメントを高める、インタラクティブで視覚的に魅力的なオーバーレイを作成できます。

以上がCSS を使用してホバー時の画像に透明なオーバーレイを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。