画像上にテキストオーバーレイ
画像の上に下から黒へフェードする半透明レイヤーを重ね、その上に白いタイトルを置く、雑誌やピンタレスト風のサムネカードです。仕組みはシンプルで、カードを position: relative と overflow: hidden の枠にし、背景となる画像レイヤーを inset: 0 で敷き詰め、テキスト帯は bott…
解説
画像の上に下から黒へフェードする半透明レイヤーを重ね、その上に白いタイトルを置く、雑誌やピンタレスト風のサムネカードです。仕組みはシンプルで、カードを position: relative と overflow: hidden の枠にし、背景となる画像レイヤーを inset: 0 で敷き詰め、テキスト帯は bottom: 0 に固定。テキスト帯の背景に linear-gradient(transparent, rgba(0,0,0,.7)) を当てることで、上は透明、下にいくほど暗くなり、どんな写真でも文字が読める仕掛けです。ホバーすると画像だけが scale(1.08) でゆっくり拡大し、枠で切り取られて生き生きとした印象になります。
活用例
- 記事一覧や特集ページのビジュアルサムネ
- 旅行・グルメ・物件など写真が主役のカード
- ギャラリーやポートフォリオのグリッド要素
サンプルでは画像枠にグラデーションを入れていますが、実際には background-image に写真を指定して使います。文字の読みやすさはグラデーションの濃さ（黒の透明度）と帯の高さで決まるので、明るい写真には濃いめを当ててください。背景画像には内容を表す見出しテキストを残し、ホバー拡大が苦手な利用者向けに prefers-reduced-motion で拡大を止める配慮も有効です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
サンプルのグラデーション部分に実際の写真を入れるには？
画像レイヤー ov-card__img の background をグラデーションから background-image の写真指定に差し替えてください。background-size を cover、background-position を center にしておくと、縦横比が違う写真でも枠いっぱいにきれいに収まります。
明るい写真だと文字が読みづらくなります。
テキスト帯のグラデーションの黒の透明度を上げる、または帯の高さ（上側の padding）を増やすと、文字の背後がしっかり暗くなって読みやすくなります。写真によって明るさが違うので、いちばん明るい画像に合わせて濃さを決めると安全です。