画像をマウスオーバーでズームする

画像の上にマウスが行くと画像がズームされるという処理をCSSのみで行います。wordpressのブロックエディタで使える様にしています。

サンプル

画像ブロックの高度な設定＞追加CSSクラスに img-hover-zoom を指定して、次のCSSを記述するだけです。

CSSの指定

.img-hover-zoom {
 overflow:hidden; //これを記述することではみ出た部分を非表示にします。
}
.img-hover-zoom img {
 transition:1s all;
}
.img-hover-zoom img:hover {
  transform:scale(1.2,1.2);
  transition:1s all;
}

画像のサイズなどはブロックエディタで指定が可能ですが、枠線・角丸には対応出来ていません。CSSの方も変更が必要になります。（要調査）

とはいえ簡単に使えるので、覚えておくと良いと思います。

参考サイト

画像をhoverした時にズームさせるcssを書こう – 株式会社ウィコネット