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

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

CSS関数「scale」

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

scale()の使い方

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

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

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

See the Pen ブログ用　画像拡大 by そす (@Sosgoyo) on CodePen.

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

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

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

See the Pen ブログ用　画像拡大説明 by そす (@Sosgoyo) on CodePen.

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

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

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

hoverアクションでscaleを使う

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

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

See the Pen ブログ用　画像拡大 by そす (@Sosgoyo) on CodePen.

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

親要素にoverflow: hidden;

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

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

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

See the Pen ブログ用　画像拡大 by そす (@Sosgoyo) on CodePen.

画像を指定している要素に「transition」

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

hoverを指定している要素に「transform: scale();」

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

まとめ

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