ホバーズーム ギャラリー
サムネイルを格子状に並べ、マウスを乗せると拡大するギャラリーです。 display:grid の grid-template-columns:repeat(3,1fr) で 3 列のタイルを作り、各タイルは aspect-ratio:1 で正方形に固定、 overflow:hidden で枠からはみ出した拡大分を切…
このパーツの使いどころと実装ポイント
サムネイルを格子状に並べ、マウスを乗せると拡大するギャラリーです。display:grid の grid-template-columns:repeat(3,1fr) で 3 列のタイルを作り、各タイルは aspect-ratio:1 で正方形に固定、overflow:hidden で枠からはみ出した拡大分を切り取ります。ホバー時に transform:scale をかけ、transition で滑らかに拡大するインタラクションが特徴です。
向いている場面
写真を多く見せたいサイトに向きます。たとえば飲食店のメニュー写真、美容室や工務店の施工事例、ハンドメイド作品の一覧、フォトグラファーのポートフォリオなどです。正方形タイルが整然と並ぶため、写真のテイストが揃っているほど美しく見えます。クリックで詳細やライトボックスに繋げる入り口としても使えます。
カスタマイズの勘所
- タイルは正方形固定なので、写真は中央を基準に
object-fit:coverで切り出すと統一感が出ます。 - 列数（3 列）を変えると印象が大きく変わります。点数が多ければ 4 列、少なければ 2 列が見やすいです。
- ホバー拡大はタッチ端末では働かないため、タップ時の代替挙動（詳細へ遷移など）を用意すると親切です。
各タイルは a なので本番では href を設定してください。拡大演出は控えめな倍率にすると、隣のタイルへ被って見づらくなるのを防げます。実写には alt を付与しましょう。
よくある質問
スマホではホバー拡大が効かないのですが大丈夫ですか？
タッチ操作の端末ではマウスを乗せる動作がないため、ホバー拡大は基本的に働きません。実用上は問題ありませんが、タップで詳細ページや拡大表示に遷移する挙動を用意しておくと、スマホの利用者にも操作の手応えが伝わります。
列数を3列から変えることはできますか？
できます。グリッドの列数指定を書き換えれば、2列や4列に変更できます。写真の点数が多いときは4列、見せたい写真を大きく出したいときは2列が向いています。画面幅に応じて列数を切り替えると、どの端末でも見やすくなります。