ホバーオーバーレイ実績タイル
このパーツは、通常時はサムネイルだけを見せ、マウスを重ねると半透明の黒いオーバーレイとともにプロジェクト名・クライアント名が下から浮かび上がる実績ギャラリーです。各タイルは aspect-ratio:1.5/1 で縦横比を固定し、 overflow:hidden と角丸でカード状に整えています。
このパーツの使いどころと実装ポイント
このパーツは、通常時はサムネイルだけを見せ、マウスを重ねると半透明の黒いオーバーレイとともにプロジェクト名・クライアント名が下から浮かび上がる実績ギャラリーです。各タイルは aspect-ratio:1.5/1 で縦横比を固定し、overflow:hidden と角丸でカード状に整えています。オーバーレイは初期状態で opacity:0、:hover 時に opacity:1 へ transition で滑らかに切り替わる仕組みです。背景色は各タイルの --c という CSS 変数で個別指定でき、グラデーションの起点色をタイルごとに変えられます。
向いている場面
制作会社のポートフォリオ、ブランドの導入事例、写真スタジオの作品一覧など、画像を主役にしつつ情報は控えめに添えたいギャラリーに向きます。一覧時は視覚的にすっきりさせ、興味を持った瞬間に詳細を見せられるのが利点です。
カスタマイズの勘所
- サムネのプレースホルダ部分（
wto__th）を実際の写真に差し替えます。background-imageで画像を当て、object-fit:cover相当の見え方になるよう調整します。 - 列数は
grid-template-columns:repeat(2,1fr)の数字で変えられます。
注意点として、ホバーで情報を出す方式はタッチ端末ではホバーが効きにくいことです。スマートフォン主体のサイトでは、タイトルを常時表示にするか、タップで切り替える代替手段を検討すると親切です。各 a には実際のリンク先を設定してください。
よくある質問
スマートフォンではホバーの情報が見えないのでは。
そのとおりで、タッチ端末ではマウスのホバーが効きにくいため情報が出ないことがあります。スマホ主体のサイトでは、タイトルを常に表示しておく、またはタップで表示を切り替える方式に変えると、すべての利用者に情報が届きます。
タイルの色や枚数を変えられますか。
変えられます。色は各タイルの style にある CSS 変数 --c を書き換えるだけで、グラデーションの起点色が変わります。枚数や列数はグリッドの repeat の数字で調整します。実運用ではプレースホルダを実際の写真に差し替えてください。