画像ホバーで説明オーバーレイ
ギャラリーの画像にマウスを乗せると、画像がわずかに拡大しながら、下から説明テキストの帯がスライドアップして現れる UI カードです。JavaScript は不要で、CSS のみで動きます。説明部分は最初 transform: translateY(100%) で画像の外（下）に隠してあり、ホバー時に transla…
解説
ギャラリーの画像にマウスを乗せると、画像がわずかに拡大しながら、下から説明テキストの帯がスライドアップして現れる UI カードです。JavaScript は不要で、CSS のみで動きます。説明部分は最初 transform: translateY(100%) で画像の外（下）に隠してあり、ホバー時に translateY(0) へ戻すことで滑り上がります。背景には透明から黒へのグラデーションを重ね、白文字が画像の上でも読めるように配慮しています。
使うと映える場面
- 制作実績や施工事例のページで、各画像にタイトルと一言説明を添えたいとき
- 商品やメニューの一覧で、普段は写真を主役にしつつ詳細をホバーで見せたいとき
帯の高さや出る速さは、説明部分の padding と transition の秒数で調整できます。注意したいのはタッチ端末ではホバーが起きないため、説明が表示されない点です。スマートフォンでも内容を伝えたい場合は、説明を常時表示にするか、タップで開く形に変えると安心です。画像には内容を表す alt を入れておくと、読み上げや検索の面でも親切です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
スマートフォンでも説明テキストは見えますか？
標準ではホバー操作が前提のため、タッチ端末では説明が出ません。モバイルでも伝えたい場合は、メディアクエリで説明を常に表示するか、タップで開閉する形に変更するのがおすすめです。
オーバーレイの色や濃さは変えられますか？
変えられます。説明部分の背景に指定したグラデーションの色と透明度の値を書き換えるだけです。ブランドカラーに合わせて黒以外の濃い色にすることもできます。