画像スワップホバー — 動きの伝え方辞典

hover

image swap on hover

画像スワップホバー

ワークス一覧のサムネイルにホバーすると2枚目の画像に切り替わる動き。「表はビジュアル、裏は現場写真」のように情報量を倍にできる定番。切替方式はopacityのクロスかクリップのワイプ。

01 — Demo video

Play live →

02 — Prompt template

ワークス一覧のカードに image swap on hover を実装してください。

- カード内に画像を2枚重ねる。下が通常時、上がホバー時の画像
- 切替方式は {{mode}}
  - crossfade の場合: 上の画像を opacity 0→1 で {{duration}}s かけてフェードインする
  - clip-wipe の場合: 上の画像を clip-path: inset(0 100% 0 0) から inset(0) へ {{duration}}s で開く
- マウスが離れたら同じ duration で元に戻す
- 2枚とも同じ枠に object-fit: cover で敷き、切替中にレイアウトが動かないようにする
- 上の画像は最初から読み込んでおく(ホバー時に src を差し替えるとチラつく)
- prefers-reduced-motion 時はアニメーションなしで即時切り替える

ワークス一覧のカードに image swap on hover を実装してください。

- カード内に画像を2枚重ねる。下が通常時、上がホバー時の画像
- 切替方式は {{mode}}
  - crossfade の場合: 上の画像を opacity 0→1 で {{duration}}s かけてフェードインする
  - clip-wipe の場合: 上の画像を clip-path: inset(0 100% 0 0) から inset(0) へ {{duration}}s で開く
- マウスが離れたら同じ duration で元に戻す
- 2枚とも同じ枠に object-fit: cover で敷き、切替中にレイアウトが動かないようにする
- 上の画像は最初から読み込んでおく(ホバー時に src を差し替えるとチラつく)
- prefers-reduced-motion 時はアニメーションなしで即時切り替える

ワークス一覧のカードに image swap on hover を実装してください。

- カード内に画像を2枚重ねる。下が通常時、上がホバー時の画像
- 切替方式は {{mode}}
  - crossfade の場合: 上の画像を opacity 0→1 で {{duration}}s かけてフェードインする
  - clip-wipe の場合: 上の画像を clip-path: inset(0 100% 0 0) から inset(0) へ {{duration}}s で開く
- マウスが離れたら同じ duration で元に戻す
- 2枚とも同じ枠に object-fit: cover で敷き、切替中にレイアウトが動かないようにする
- 上の画像は最初から読み込んでおく(ホバー時に src を差し替えるとチラつく)
- prefers-reduced-motion 時はアニメーションなしで即時切り替える

03 — Params

duration(切替時間 s) — 範囲 0.15〜0.8 / 初期 0.3
0.25〜0.4sが自然。速すぎると点滅に、遅いと2枚が混ざった状態が目立つ。
mode(切替方式) — 選択: crossfade / clip-wipe（初期: crossfade）
crossfadeは溶けるように、clip-wipeは左から拭き取るように切り替わる。

04 — Vocab

crossfade — 2枚を重ねてopacityで溶かすように切り替える方式。もっとも汎用的で失敗が少ない。
clip-path: inset() — 要素を矩形で切り抜くCSS。insetの右辺を100%→0にすると左から拭き取るワイプになる。
事前読込 — 2枚目を最初からDOMに置いて読み込ませておくこと。ホバー時のsrc差し替えはチラつきの元。
object-fit: cover — 縦横比の違う画像を枠いっぱいに敷き詰める指定。2枚のサイズ差を吸収し切替中のズレを防ぐ。

05 — NG → OK examples

言い方: 「「ホバーしたら画像が変わるようにして」」

なぜNG: ホバー時に img の src を差し替えるだけの実装が返ってきがち。2枚目が未読込だと一瞬白くチラつき、切替アニメーションも付かない。重ねて opacity か clip で切り替えるのが正解と伝わらない。

言い方: 「「image swap on hoverを実装。2枚を重ねて上をopacity 0→1の0.3sでクロス、両方object-fit: cover、2枚目は事前読込、leaveで戻す」」

なぜOK: 重ね方式・切替プロパティ・数値・事前読込まで指定。「srcを差し替えない」ことが品質の分かれ目なので、実装構造から指示する。