画像をマウスカーソル（hover）で拡大するコーディング

こんにちは、mickです。

Webページを作るとき、画像に関するコーディングすることって多いと思います。

復習のつもりで次のことを記事にしてます。

画像をマウスカーソルで触ったときに拡大したい
画像に関する CSS 知りたい

画像をマウスで触ったとき（hover）して拡大する
まとめ。

画像をマウスで触ったとき（hover）して拡大する

Webページの画像（を含む要素）を操作したいときは CSS の transform プロパティを利用します。
そして、今回は大きさに関して操作したいので scale() を利用します。

今日のメインは :scale()

scale() を使うと、画像（を含む要素）を大きくしたり、小さくしたりする。

他にもある :rotate()

rotate() を使うと、画像を大きくするだけでなくて、画像（を含む要素）を回転することができます。

こんなのもある :translate()

translate() を使うと、画像（を含む要素）を水平、垂直に移動させることができます。

実際に transform:scale() を使う

さっそく、transform:scale() を使っていきます。
コーディングはこちら。

サンプル

画像をマウスカーソルで触ると拡大する。

HTML 部分

<div class="sample_effect"><img src="https://picsum.photos/300"></div>

CSS 部分

.sample_effect {
    width:300px; /* 画像サイズを決める */
    overflow: hidden; /* 画像を拡大したときにはみ出た部分を非表示 */
}

.sample_effect img {
 transition:0.5s all; /* 元に戻るときのスピードを調整する */
}

.sample_effect img:hover{
  transform:scale(1.2, 1.2); /* X軸方向とY軸方向と大きさをコントロールする */
  transition:0.5s all; /* 拡大するスピードを調整する */
}