hoverで画像拡大
画像にマウスをホバーした時に、滑らかに拡大するアニメーション効果です。ギャラリーやカード、商品一覧などでよく使われるインタラクティブなUIエフェクトです。
プレビュー
商品カード例
画像部分だけ拡大
ギャラリー例
オーバーフロー非表示
実装のポイント
overflow: hidden;で画像が枠からはみ出さないようにするのが重要。transform: scale()は要素の中心から拡大されます。object-fit: cover;で画像の縦横比を保持。transition時間を調整してユーザビリティを向上させましょう。