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

画像をマウスカーソル(hover)で拡大するコーディング HTML/CSS

こんにちは、mickです。

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

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

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

画像をマウスで触ったとき(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; /* 拡大するスピードを調整する */
}

まとめ。

画像をマウスカーソル(hover)で拡大するコーディングを紹介しました。

やってみると意外とシンプルなのがありがたい。
よくできてますよね。

transition の時間を調整したり、scale で大きさを調整すると、より自分好みの設定になります。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/06/27

タイトルとURLをコピーしました