![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
CSSの transform: scale(); を使うと、画像に簡単な拡大アニメーションを付けられます。
カード型レイアウトやサムネイルに動きを加えるだけで、UI をぐっとリッチに見せることができます。
この記事では、
- img 要素の画像を拡大する方法
- 背景画像を拡大する方法
の2パターンを紹介します。
img 要素の画像を拡大する
・html
|
1 2 3 |
<div class="img-wrap"> <img src="images/img_hover-zoom01.jpg" alt="" /> </div> |
・css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.img-wrap { aspect-ratio: 16 / 11; overflow: hidden; /* 拡大時にはみ出した部分を表示しないため */ } .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; /* 値の変化をアニメーションさせる */ } .img-wrap:hover img { transform: scale(1.1); /* ホバーをきっかけに拡大 */ } |
See the Pen [CSS] transform: scale()でimg画像をホバー時に拡大する方法 by mkl may (@mkl-may) on CodePen.
ポイント
transform: scale();で img 要素を拡大するtransitionにより、ホバー時の変化が滑らかになる- 親要素に
overflow: hidden;を指定すると、拡大してもレイアウトが崩れない - スマホなど hover が使えない環境では基本的に発動しない
- 拡大率は
scale(1.05)～1.15程度が自然
実際の案件では サムネイル一覧 などでよく使われる方法です。
背景画像を拡大する
背景画像は <img> のように直接 transform を指定できません。
そのため、疑似要素に背景画像を持たせて拡大します。
・html
|
1 |
<div class="bg-img-wrap"></div> |
・css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.bg-img-wrap { position: relative; aspect-ratio: 16 / 11; max-width: 600px; overflow: hidden; /* 拡大時にはみ出した部分を表示しないため */ } .bg-img-wrap::before { content: ''; position: absolute; inset: 0; background-image: url('images/img_hover-zoom01.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; transition: transform 0.4s ease; /* transform の変化を滑らかに */ } .bg-img-wrap:hover::before { transform: scale(1.1); /* 疑似要素ごと拡大して表現 */ } |
See the Pen [CSS] transform: scale()で背景画像をホバー時に拡大する方法 by mkl may (@mkl-may) on CodePen.
ポイント
- 背景画像は直接拡大できないため、疑似要素（::before）を拡大する
position: absolute+inset: 0で要素全体に敷き詰めているoverflow: hidden;を指定しないと、拡大時にはみ出す- スマホでは hover が使えない点は img と同じ
- バナーやヒーローエリアなど、リンクブロック系の UI と相性が良い
画像タグを増やしたくない場面で便利なテクニックです。
まとめ
transform: scale(); を使えば、CSS だけで簡単にホバー拡大の演出を追加できます。
わずかな動きでも、サイトの完成度や高級感を高める効果があります。
カード UI や記事一覧などにぜひ取り入れてみてください。