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

CSSだけで実現！ホバー時に画像がズームするオーバーレイ効果の作り方

Webサイトに動きを加える演出のひとつとして人気があるのが、画像にマウスカーソルを重ねたとき（ホバー時）にオーバーレイが拡大しながら表示される「オーバーレイズーム効果」です。JavaScriptを使わず、CSSだけでも簡単に実装できます。

実装のポイント

この効果を実現するための主なポイントは以下のとおりです。

  • 親要素（カードコンテナ）に position: relative; を指定し、基準位置を作る
  • オーバーレイ要素には position: absolute; を指定し、初期状態では height: 0; と transform: scale(0); で非表示にしておく
  • :hover 時に height: 100%; と transform: scale(1); へ変化させ、transition プロパティで滑らかなアニメーションを付ける

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card-container {
    position: relative;
    width: 50%;
}
img {
    display: block;
    width: 100%;
}
.overlay {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(55, 74, 179);
    overflow: hidden;
    width: 100%;
    height: 0;
    transform:scale(0);
    transition: .5s ease-in-out;
}
.card-container:hover .overlay {
    height: 100%;
    transform: scale(1);
}
.caption {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}
</style>
</head>
<body>
<h1>Image Overlay Zoom Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="overlay">
<div class="caption">Dog</div>
</div>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、最初は通常どおり画像だけが表示されます。

CSSだけで実現！ホバー時に画像がズームするオーバーレイ効果の作り方

画像にマウスカーソルを重ねると、青色のオーバーレイがズームしながら拡大し、画像全体を覆うように表示されます。中央にはキャプションテキストも一緒にフェードインします。

CSSだけで実現！ホバー時に画像がズームするオーバーレイ効果の作り方

コードの解説

  • .card-container：画像とオーバーレイをまとめる親要素です。position: relative; を指定することで、子要素であるオーバーレイの配置基準になります。
  • .overlay：ホバー時に表示される半透明ではない単色レイヤーです。初期状態では高さ0・スケール0のため見えませんが、transition: .5s ease-in-out; により、ホバー時に0.5秒かけて滑らかに拡大します。
  • .caption：top: 50%; left: 50%; を使ってオーバーレイの中央にテキストを配置しています。

この手法はポートフォリオサイトや商品ギャラリーなどでよく使われる定番テクニックなので、ぜひ自分のプロジェクトにも取り入れてみてください。色やトランジションの速度を変えれば、サイトの雰囲気に合わせたカスタマイズも簡単に行えます。

  1. CSSでホバー時に要素をズーム（拡大）表示する方法

    CSSで要素にマウスカーソルを合わせたとき（ホバー時）に、その要素をズーム・拡大表示するには、transformプロパティとtransitionプロパティを組み合わせて使用します。以下に具体的なコード例を示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: bo

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

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