グレースケール→カラー
普段はモノクロ、ホバーでふわっと色づいて少し拡大。写真ギャラリーで効果的。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 写真ギャラリー・ロゴ一覧
- 選んだ1枚だけ色を付けて注目させる
- 落ち着いた一覧に反応を足す
- 避ける場面
- 色が情報を持つ画像（モノクロで意味を失う）
- focus で色が戻らないまま使う
- 小さなサムネイルの密集
- 構成要素
- カード
- 画像
- モノクロ状態
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でカードへ（tabindex=0）。focus-visible で hover と同じく色が戻る。タップはトグル
- 支援技術
モノクロでも内容が判別できる画像を選ぶ。img 化時は alt。focus-visible でも色が戻り輪郭が出る。reduced-motion では拡大を止め色の変化だけ残す
- 動き
filter grayscale 100→0％ と scale 1.05 を 0.5s ease。選択の注目。reduced-motion では拡大無し・色は即時
デザインの要点
- grayscale は filter で当て、元画像は差し替えない。モノクロ版とカラー版の 2 枚を用意すると切り替えで一瞬白くなる
- 色が戻るのと同時に 1.05 倍だけ拡大する。色だけだと「選ばれた」感が弱く、拡大が大きいと隣に被る
- 0.5s とゆっくり戻す。速いと点滅に見え、ギャラリーで視線を走らせたとき目が疲れる
- focus-visible にも同じ変化を当てる。hover でしか色が戻らないと、キーボードでは全部モノクロのまま
コード（コピーして使えます）
<figure class="gs-card" tabindex="0">
<!-- .gs-img を <img> に置き換えて使う。実装ではカード全体を <a> にする -->
<div class="gs-img"></div>
</figure>