ホバーで画像が露出するマスク効果
このリビールアニメは、ホバーすると上に重ねた面が横スワイプのように広がり、下に隠れていた内容が現れる演出です。中心となる技術は clip-path です。上の層 reveal__top は通常時 polygon(0 0,0 0,0 100%,0 100%) という幅ゼロの多角形に切り抜かれていて、左端で完全に潰れた…
解説
このリビールアニメは、ホバーすると上に重ねた面が横スワイプのように広がり、下に隠れていた内容が現れる演出です。中心となる技術は clip-path です。上の層 reveal__top は通常時 polygon(0 0,0 0,0 100%,0 100%) という幅ゼロの多角形に切り抜かれていて、左端で完全に潰れた状態になっています。ホバーすると polygon(0 0,100% 0,100% 100%,0 100%)、つまり全面を覆う四角形へ変化し、その差分を transition がなめらかに補間することで、左から右へワイプして覆っていくように見えます。色面の代わりに画像を入れれば、画像が出てくるリビールにもなります。CSS のみで JavaScript は不要です。
使う場面
- 作品サムネイルで、ホバー時にタイトルや別画像を見せる
- ボタンやカードの変化で遊び心を加える
- おしゃれサイトのセクション見出しのアクセント
ワイプの速さと質感は transition の時間（既定 .55s）とイージングで決まります。広がる方向は clip-path の polygon 座標を組み替えれば、右からや上下方向にも変えられます。注意点として、重要な情報を隠れた層だけに置くと、ホバーできないタッチ端末で見えなくなります。アクセスできる場所に本文を残す設計にしてください。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
広がる方向を右からや上下に変えられますか
変えられます。reveal__topのclip-path:polygon()の座標を組み替えると、左からだけでなく右から、上から、下からなど好きな方向にワイプさせられます。速さはtransitionの時間（既定0.55s）で調整します。
スマホで内容が見えなくなりませんか
この効果はホバー前提のため、タッチ端末では上の層が広がらず隠れた内容が見えにくくなります。重要な情報は隠れる層だけに置かず、常に見える場所にも残すか、タップで切り替える処理を足すとよいです。