画像ズームホバーカード
マウスを乗せると内部の画像だけがゆっくり拡大し、カードの外枠は動かないギャラリーカードです。仕組みは画像枠に overflow:hidden を掛けてはみ出しを隠し、ホバー時に画像へ transform:scale(1.1) を当てるだけ。
解説
マウスを乗せると内部の画像だけがゆっくり拡大し、カードの外枠は動かないギャラリーカードです。仕組みは画像枠に overflow:hidden を掛けてはみ出しを隠し、ホバー時に画像へ transform:scale(1.1) を当てるだけ。拡大は transition と cubic-bezier で滑らかに変化し、枠は固定なのでレイアウトが揺れません。CSS のみで完結し、軽量に動きます。
こんな場面で使えます
- 制作実績やポートフォリオのサムネ一覧
- EC の商品ギャラリーで写真を強調したいとき
- ブログのアイキャッチを並べた記事一覧
カスタマイズは scale の倍率を 1.05〜1.15 の範囲で調整すると、控えめにも大胆にも変えられます。拡大の速さは transition の秒数で決まり、長くするほど上品な印象になります。注意点として、はみ出しを隠す overflow:hidden は画像枠側に必須で、これが無いと拡大画像が枠外へあふれます。動きを嫌うユーザー向けに prefers-reduced-motion で拡大を止める指定を足すと配慮が行き届きます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
枠ごと大きくならず、画像だけ拡大できるのはなぜですか。
画像枠に overflow:hidden を掛けて中身のはみ出しを隠し、その中の画像にだけ transform:scale を当てているからです。枠の大きさ自体は変わらないので、隣のカードがずれることもありません。
拡大の大きさや速さは変えられますか。
変えられます。拡大率は scale の数値で決まり、1.1 を 1.05 にすれば控えめに、1.15 にすればダイナミックになります。変化の速さは transition の秒数を増減させれば調整できます。