【CSS】hoverで画像を拡大させる

2023年11月20日

画像をhoverしたら拡大できるようにしたい。枠の大きさはそのままで！

というわけで今回はhoverアクションの一つ、画像拡大について説明します。
案件でも良く使う手法ですので是非とも習得していきましょう！！

CSS関数「scale」

画像拡大に関しては、transform: scale();を使用します！
まずはCSS関数「scale」について学んでいきましょう！！

ではさっそく使い方を見ていきましょう。

scale()はCSSのプロパティ、transformの関数になります。
scale関数は、1つまたは2つの値で指定することができ、それにより各方向に適用される変倍が表現されます。

と、難しく書きましたが要は指定した数値に合わせて拡大・縮小することができるというものです。
では早速コードをみていきましょう。

※Resultは0.5x、もしくは0.25xでご覧ください。

画像のサイズが違いますね。
同じ画像を使用しておりますが、右の方はscale(1.3)を適用させております。
指定した数値が一つなので、これは縦・横共に1.3倍に拡大することになります。

では，次は二つの数値を指定してみましょう！

どうでしょう？？
今回はscale(1.3,0.5)と指定しております。これでと、
X軸（横）に1.3倍、Y軸（縦）に0.5倍となります。
ご覧の通り、単純に拡大・縮小するので比率がおかしくなりますね。

更に3つ数値を指定するとX軸・Y軸・Z軸で指定することができます。（Z軸は奥行き）
今回は説明しませんが･･･。

では次よりhoverアクションでscaleを使ってみましょう！

ではここからが本題。
hoverアクションを絡めてscaleを使用していきましょう！

さっそくコードをみていきましょう！！

実際にホバーしてみてください。良い感じに拡大されましたね！
では、次より今回のポイントを抑えていきましょう！

今回使用しているクラスをおさらいしましょう！

.c-card__img　　　⇒　画像を包む親要素
.c-card__img img　⇒　画像を指定している要素
.c-card__img img:hover　⇒　画像のホバーアクション

ここで大事なのは、画像の親要素である「.c-card__img」に「overflow: hidden;」を指定すること。
これを指定しないと･･･、ホバーした瞬間に画像がはみ出します。
こんな感じです↓

これはイケてない！！典型的な表示崩れパターンですね！！

ホバー時のアクションを滑らかにしたいので
画像を指定している要素「.c-card__img img」に「transition」を指定してください！
今回は「transition: 0.3s;」ですので、0.3秒かけてホバーアクションを行う指定になります。

最後に、hoverを指定している要素「.c-card__img img:hover」に「transform: scale;」を指定します。
「scale()」で指定する数値はご自身で好きな数字にしてくださいね。
個人的には1.1～1.3くらいが見やすいかな～と思ってます。

というわけで今回は、hoverで画像を良い感じに拡大させる方法についてご説明しました！
実案件でも割と使う手法ですので是非とも覚えていきましょう！！

よかったらフォローしてね！！