【コーディング】カーソルを乗せると画像が「ズームイン」するホバーエフェクトの実装方法をご紹介

画像やリンクボタン等にカーソルを乗せた時の動きを「ホバーエフェクト」と呼びますが、調べてみると沢山の種類のエフェクトが紹介されていたりします。
その中でもメジャーなズームイン系のホバーエフェクトを先日初めて使ってみたので、この場でおさらいしてみたいと思います。

↓今回紹介するズームインのエフェクトはこんな感じ

（画像の表示サイズは固定させ、その中でズームインするかたち）

まずは、HTML側にズームインさせたい画像のパスを記述します。

そして、CSS側ではimgタグを囲む親要素に対して、画像の枠となる幅と高さを指定しながら画像が拡大する時に、その枠からはみ出さないよう「overflow:hidden」を指定します。

cursor: pointer;はホバーした時のカーソルの見た目を変えるコードです。

.zoom_in {
　width: 200px;
　overflow: hidden;
　cursor: pointer;
}

最後に画像に対して幅とtransform（拡大率）、transition（変化にかかる時間）を指定します。

.zoom_in img {
　width: 100%;
　transform: scale(1);
　transition: .3s ease-in-out;
}

.zoom_in:hover img {
　transform: scale(1.3);
}

これで出来上がり！

ホバーエフェクトをまとめられている記事をいくつか読んで挑戦してみたのですが、最初はうまく反映させることが出来ませんでした。

なので、１種類に絞って試行錯誤しながら自分なりに分かりやすく噛み砕いてまとめてみた次第です。少しでも参考になったら幸いです！

▼ Webデザインもコーディングもこれ１冊で学べます！オススメ。