ホバーで画像がズーム（枠固定）
これはサムネイル画像にマウスを乗せると、外側の枠はそのままに 中身の画像だけがゆっくり拡大 するホバー演出です。仕組みはシンプルで、親要素に overflow:hidden と aspect-ratio:4/3 を指定して枠の形を固定し、内側の画像へ transition:transform .55s を当てておき…
解説
これはサムネイル画像にマウスを乗せると、外側の枠はそのままに中身の画像だけがゆっくり拡大するホバー演出です。仕組みはシンプルで、親要素に overflow:hidden と aspect-ratio:4/3 を指定して枠の形を固定し、内側の画像へ transition:transform .55s を当てておきます。ホバー時に transform:scale(1.12) で 1.12 倍に広げると、はみ出した部分は枠でトリミングされ、レイアウトを崩さずズームだけが起きます。
こんな場面に向きます
- 記事一覧やブログのサムネイル
- 商品ギャラリーや実績紹介のカード
- クリックできることをさりげなく伝えたい画像リンク
カスタマイズは、拡大率を scale(1.08) 程度に抑えると上品に、速さは .55s の数値を変えて調整できます。イージングの cubic-bezier はゆったり止まる動きなので、急がせたいなら ease-out でも構いません。実際の画像を入れるときは .hz__img の background を background-image に置き換えてください。動きを嫌う利用者のために prefers-reduced-motion で transform を無効化しておくと親切です。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
拡大しても枠がガタつかないのはなぜですか
親要素に overflow:hidden を指定し、はみ出した画像を枠でトリミングしているためです。拡大しているのは内側の画像だけで、外枠のサイズは変わらないのでレイアウトはずれません。
実際の写真に差し替えるにはどうしますか
.hz__img のグラデーション背景を background-image:url(...) に変えるだけです。アスペクト比は親の aspect-ratio で固定されるので、写真の縦横比が多少違っても枠通りに表示されます。