マウスホバー時に画像を拡大・縮小するエフェクトをかけるCSS

マウスホバー時に画像を拡大・縮小するエフェクトはCSSのみで実現可能です。

以下に画像を拡大・縮小する時のサンプルを紹介します。

拡大エフェクトをかける

HTML

CSS

ブロックの中で拡大エフェクトかける

HTML

CSS

縮小エフェクトかける

HTML

CSS

ブロックの中で縮小エフェクトかける

HTML

CSS

応用：拡大しつつマスクをかけたようなエフェクトを実現する

HTML

CSS