画像ズーム＋タイトル
ホバーで画像がゆっくり拡大し、タイトルが浮かび上がる。カード型の記事一覧で定番。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 記事・作品のカード一覧
- サムネイルにタイトルを重ねたい
- ホバーで注目を返す画像リンク
- 避ける場面
- タイトルが常時見えないと困る一覧
- 画像が主役でなくテキスト主体のカード
- タップでトグルする挙動が遷移と衝突するリンク
- 構成要素
- カード
- 画像
- タイトル
- グラデーション帯
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でカードへ（tabindex=0）。focus-visible で hover と同じ拡大とタイトル表示が出る。タップはトグル
- 支援技術
タイトルは hover／focus 時に表示。実装ではカードを a にして遷移させ、img 化時は alt を付ける。reduced-motion では拡大を止めタイトルの表示だけ残す
- 動き
画像 scale 1.12 を 0.5s ease、タイトル opacity 0.4s。注目の手応え。reduced-motion では拡大無し
デザインの要点
- 拡大は 1.12 倍・0.5s とゆっくりにする。速い拡大は「跳ねた」に見え、一覧で何枚も動くと目が疲れる
- カードに overflow:hidden を付け、拡大した画像を枠で切る。切らないと隣のカードに重なる
- タイトルの帯は下から上へ透明になるグラデーション。単色の帯は画像の下 1/3 を潰す
- focus-visible にも hover と同じ表示を当てる。タイトルが hover でしか出ないと、キーボードでは何のカードか分からない
コード（コピーして使えます）
<figure class="zoom-card" tabindex="0">
<!-- .zoom-img を <img> に置き換えて使う。実装ではカード全体を <a> にする -->
<div class="zoom-img"></div>
<figcaption class="zoom-cap">記事のタイトル</figcaption>
</figure>