【CSS】マウスオーバーで画像が拡大・縮小するアニメーション

こんにちは、Ryohei（@ityryohei）です！

CSSでマウスオーバー時に画像を拡大・縮小するアニメーションのご紹介です。

ブログのアーカイブページで画像を含むリンク要素にマウスカーソルを乗せると、画像だけが少し拡大するアニメーションをご覧になったことがあるかと思います。

マウスカーソルがあたっていることが視覚的にわかるため、色々なサイトで取り入れられていますね。

本記事では上記アニメーションの実装方法を詳しくご紹介しています。

では、解説していきます。

共通のHTMLを作成する

マウスオーバーで画像を拡大もしくは縮小させる、画像を含むHTMLを作成します。最近はカードの形をしたパネル全体をaタグで囲んているケースが多いので、同じようなHTMLで作成していきます。

<a href="#">
  <div class="image">
    <img src="https://into-the-program.com/uploads/modal-window.jpg" alt="">
  </div>

  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>

マウスオーバーで画像を拡大させるアニメーション

まずは拡大するアニメーションからご紹介します。

流れとしては下記のようになるかと思います。

要素にマウスカーソル<乗せる/li>
要素の画像が拡大する

では早速、上記でご紹介したHTMLにCSSを定義してみましょう。

CSS

a {
  display: block;
  width: 100%;
  margin: 28px auto 0;
  color: #000;
  text-decoration: none;
}

a .image {
  height: 100px;
  overflow: hidden;
}

a .image img {
  width: 100%;
  height: auto;
  transition: .3s;
}

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

下記はマウスオーバーで画像が拡大するアニメーションのデモになります。

DEMO

See the Pen
gJZvQO by ryoy (@intotheprogram)
on CodePen.

リンクにマウスカーソルを乗せると画像が少し大きくなったかと思います。

本記事での画像の拡大はtransformのscale関数を使用して実現しています。widthやheightを指定して大きくすることも可能ですが、transformのscaleは主要ブラウザでは対応済みとなりますので、transformを使用することをおすすめします。

注意点として、上記のデモでは隠していますが、画像が拡大した際に内部的には親要素からはみ出す形となります。親要素には「overflow: hidden」を設定して、はみ出した画像が要素外に表示されないようにしておきましょう。

マウスオーバー時に画像を縮小させるアニメーション

続いて、画像を縮小させるアニメーションのご紹介です。

処理の流れは拡大する際と同様になります。違いとしましては、デフォルトの画像にscaleをあてて拡大した状態にしている点です。マウスカーソルを乗せると拡大した画像が元のサイズに戻るイメージになります。

CSS

a {
  display: block;
  width: 30%;
  margin: 28px auto 0;
  color: #000;
  text-decoration: none;
}

a .image {
  height: 100px;
  overflow: hidden;
}

a .image img {
  width: 100%;
  height: auto;
  transform: scale(1.5);
  transition: .3s;
}

a:hover .image img {
  transform: scale(1);
}

下記はマウスオーバーで画像が縮小するアニメーションのデモになります。