CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像オーバーレイのホバー効果を作成する方法

CSSを使用すると、画像にマウスカーソルを重ねた（ホバーした）ときに、画像を半透明にしながらテキストキャプションを重ねて表示する「オーバーレイ効果」を簡単に実装できます。JavaScript不要でHTMLとCSSだけで動作するため、フォトギャラリーやカード型レイアウトなど、さまざまなWebサイトで活用されている定番のテクニックです。

仕組みのポイント

  • .card-container： position: relative; を指定し、テキストを絶対配置する基準となるコンテナとして機能させます。
  • img： transition で滑らかな変化を実現し、backface-visibility: hidden; でホバー時のちらつきを防止します。
  • .hoverText： 初期状態では opacity: 0; で非表示にし、画像の中央に絶対配置します。
  • :hover擬似クラス： ホバー時に画像の透明度を下げ、テキストの透明度を上げることでフェードイン表示を実現します。

実装例

以下は、画像オーバーレイのホバー効果を作成するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card-container {
    display: inline-block;
    position: relative;
    width: 50%;
}
img {
    opacity: 1;
    display: block;
    width: 100%;
    transition: .5s ease;
    backface-visibility: hidden;
}
.hoverText {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 40%;
    text-align: center;
}
.card-container:hover img {
    opacity: 0.4;
}
.card-container:hover .hoverText {
    opacity: 1;
}
.caption {
    background-color: rgb(18, 53, 131);
    color: white;
    font-size: 30px;
    padding: 20px;
    border-radius: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
}
</style>
</head>
<body>
<h1>Image Overlay effect Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="hoverText">
<div class="caption">Dog</div>
</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSで画像オーバーレイのホバー効果を作成する方法

画像にマウスカーソルを重ねると、画像が半透明になり、中央にキャプションがフェードイン表示されます。

CSSで画像オーバーレイのホバー効果を作成する方法

応用のヒント

transition の秒数を変更すればアニメーションの速度を調整でき、top や left の値を変えればキャプションの表示位置も自由にコントロールできます。また、背景色や角丸（border-radius）を変更することで、サイトのデザインに合わせた演出が可能です。

  1. CSSでスムーズなスクロール効果を実現する方法【scroll-behavior活用】

    CSSだけでスムーズなスクロール（スムーススクロール）を実現したい場合、scroll-behaviorプロパティを使用します。このプロパティにsmoothを指定すると、ページ内リンクをクリックした際に、瞬時にジャンプするのではなく、滑らかにアニメーションしながら目的のセクションへ移動できるようになります。実装方法基本的には、html要素に対して以下の1行を追加するだけです。html { scroll-behavior: smooth; }サンプルコード実際に動作する完全なコード例は以下の通りです。<!DOCTYPE html> <html> <head>

  2. CSSだけで作る視差スクロール（パララックス）効果の実装方法

    CSSだけで視差スクロール（パララックス）効果を実現するには、background-attachment: fixed; を使用します。このプロパティを指定すると、背景画像がブラウザの表示ブラウザの表示領域（ビューポート）に固定され、ページをスクロールしても背景だけが動かなくなります。その結果、前景のコンテンツと背景との間に速度の違いが生まれ、奥行きのある視差効果を演出できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=