目次
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);
}
下記はマウスオーバーで画像が縮小するアニメーションのデモになります。
DEMO
See the Pen Image Hover Scale Animation02 | CSS by ryoy (@intotheprogram) on CodePen.
最後に
本記事でご紹介したマウスオーバーで画像拡大・縮小するアニメーションはアーカイブページのリンクだけではなく、サイドバーや関連記事にも簡単に実装することができますので、ぜひ色々なサイトで活用していただければと思います。
以上、CSSでマウスオーバーで画像が拡大・縮小するアニメーションのご紹介でした！
