ホバー時オーバーレイ実績タイル
このパーツは、実績サムネイルにマウスを乗せると下からオーバーレイがスライドインして案件名や成果を見せる、3 カラムの実績タイルです。各タイルは aspect-ratio:4/3 で縦横比を固定し、 overflow:hidden で角丸内に画像を収めます。
このパーツの使いどころと実装ポイント
このパーツは、実績サムネイルにマウスを乗せると下からオーバーレイがスライドインして案件名や成果を見せる、3 カラムの実績タイルです。各タイルは aspect-ratio:4/3 で縦横比を固定し、overflow:hidden で角丸内に画像を収めます。ホバー時は背景画像が transform:scale でわずかに拡大し、同時にオーバーレイが translateY(100%) から 0 へ動く二段構えのアニメーションが特徴です。
向いている場面
- 制作会社・デザイン事務所のポートフォリオ一覧
- 建築・施工・リフォームの施工事例ギャラリー
- EC や LP の制作実績で、カテゴリと成果数字を添えたいとき
カスタマイズと注意点
サンプルは背景にグラデーションを使っていますが、実際の制作物のスクリーンショットやサムネイルに差し替えると一気に実績らしくなります。タイル全体が a リンクなので、href に各案件の詳細ページを設定してください。ホバーはタッチ端末では発火しないため、スマホでは最初からオーバーレイを表示しておくか、タップで開く動きへ切り替える配慮が必要です。色付きの cat ラベルはカテゴリ分類に使え、CORPORATE / EC / LP などを案件に合わせて変えられます。
よくある質問
スマホではホバーが効きませんが大丈夫ですか
ホバーはマウス操作前提なので、タッチ端末では下からのスライドインが発火しません。スマホ向けにはメディアクエリでオーバーレイを最初から見える状態にするか、タップで開閉する形に変えると情報が隠れません。
グラデーションの背景は実際の画像に変えられますか
変えられます。wk-ho__bg のインラインの background をグラデーションから background-image の画像指定に置き換えるか、img 要素を差し込んでください。実際の制作物のサムネイルを入れると実績ページとして説得力が出ます。