枠のサイズは変えずに、中の画像だけがゆっくり拡大するホバーエフェクト。ギャラリーや商品カードの定番です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
仕組みは「外枠の overflow: hidden ＋ 中身の transform: scale()」の2つだけです。拡大するのは中身だけで枠のサイズは変わらないため、周囲のレイアウトに影響しません。scaleは要素の中心を基点に拡大するので、はみ出した分は枠が均等にトリミングします。倍率は1.05〜1.1程度が上品です。
実際の画像では img に width: 100% と object-fit: cover を指定してから同じtransformを掛けます。ホバー時にぼかしや暗幕を重ねるとテキストオーバーレイとも相性が良いです。