CSSで虫眼鏡効果を簡単に実装！初心者向け徹底解説＆サンプルコード

はじめに
●虫眼鏡効果とは？
●虫眼鏡効果の作り方
●虫眼鏡効果の応用例：無限ループ
●応用例：複数の画像に虫眼鏡効果を適用する
まとめ

はじめに

CSSを使って、ウェブページに魅力的なエフェクトを追加したいと思っている初心者の皆さん、こんにちは！

今回は、初心者でも簡単にできる虫眼鏡効果（ズームイン・アウト）の作り方と使い方を徹底解説します。

また、無限ループする虫眼鏡効果や応用例もご紹介しますので、ぜひ最後までお読みください。

●虫眼鏡効果とは？

虫眼鏡効果とは、マウスオーバー（カーソルを合わせる）時に画像が拡大・縮小するエフェクトのことを指します。

これにより、ウェブページの画像にアクセントを付けたり、情報を際立たせることができます。

では、実際に作成していきましょう。

●虫眼鏡効果の作り方

ここでは、HTMLとCSSを使って虫眼鏡効果を実装していきます。

まずは、HTMLのコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>虫眼鏡効果のデモ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="magnifier">
        <img src="sample.jpg" alt="サンプル画像">
    </div>
</body>
</html>

次に、CSSのコードです。

style.cssファイルに下記のコードを記入してください。

.magnifier {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.magnifier img {
  width: 100%;
  transition: transform 0.3s;
}

.magnifier:hover img {
  transform: scale(1.5);
}

このCSSコードでは、.magnifierクラスを持つ要素（今回は<div>）の中の<img>要素に対して、次のことを行っています。

通常時（マウスオーバーしていない状態）では、画像の幅を100%に設定し、拡大・縮小のアニメーション時間を0.3秒に設定しています。
マウスオーバー時には、画像の拡大率を1.5倍に変更しています。

以上で、虫眼鏡効果が完成しました。

試しに、マウスカーソルを画像に合わせてみてください。

画像がスムーズに拡大・縮小するエフェクトが実装されていることが確認できるはずです。

●虫眼鏡効果の応用例：無限ループ

さらに、虫眼鏡効果を無限ループさせる方法もご紹介します。こちらもCSSのみで実現できます。

次のコードをstyle.cssファイルに追加してください。

@keyframes loopMagnifier {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

.magnifier.loop img {
  animation: loopMagnifier 3s infinite;
}

.magnifier.loop:hover img {
  animation-play-state: paused;
}

このコードでは、@keyframesを使って、無限ループするアニメーションを定義しています。

アニメーションの名前はloopMagnifierで、以下の動作を行います。

0%と100%（アニメーションの開始と終了）では、画像の拡大率を1倍に設定しています。
50%（アニメーションの途中）では、画像の拡大率を1.5倍に設定しています。

また、.magnifier.loopクラスを持つ要素の<img>要素に対して、以下のことを行っています。

アニメーションをloopMagnifierに設定し、アニメーション時間を3秒に設定し、無限ループさせています。
マウスオーバー時には、アニメーションを一時停止させています。

HTMLにもloopクラスを追加して、次のように変更してください。

<div class="magnifier loop">
    <img src="sample.jpg" alt="サンプル画像">
</div>

これで、無限ループする虫眼鏡効果が実装されました。

マウスカーソルを合わせない状態では、画像が自動で拡大・縮小するアニメーションが無限ループします。

マウスカーソルを合わせると、アニメーションが一時停止します。

●応用例：複数の画像に虫眼鏡効果を適用する

さらに、複数の画像に虫眼鏡効果を適用する方法も簡単です。

HTMLの中で、複数の<div>要素に.magnifierクラスを付け、それぞれの<img>要素に画像ファイルを設定してください。

<div class="magnifier">
    <img src="sample1.jpg" alt="サンプル画像1">
</div>
<div class="magnifier">
    <img src="sample2.jpg" alt="サンプル画像2">
</div>
<div class="magnifier">
    <img src="sample3.jpg" alt="サンプル画像3">
</div>

これで、複数の画像に虫眼鏡効果が適用されます。