ホバーで浮き上がる shadow lift
要素にカーソルを乗せると影が深くなり、ふわりと浮き上がる シャドウリフト の演出です。仕組みはシンプルで、ホバー時に transform:translateY(-6px) で少し上へ動かし、同時に box-shadow を薄く広いものから濃く大きいものへ切り替えています。
解説
要素にカーソルを乗せると影が深くなり、ふわりと浮き上がるシャドウリフトの演出です。仕組みはシンプルで、ホバー時に transform:translateY(-6px) で少し上へ動かし、同時に box-shadow を薄く広いものから濃く大きいものへ切り替えています。両方を transition で滑らかに繋ぐことで、紙が机から持ち上がるような立体感が生まれます。CSS だけで完結し、JavaScript は不要です。
使う場面
- クリックできるカードやサムネイルの「押せる感」の付与
- ボタンや料金プランの強調
- 一覧の中で注目させたい要素のホバー反応
translateY の移動量と box-shadow のぼかし・濃さを変えると、浮き具合を細かく調整できます。transform はレイアウトを再計算させず描画が軽いため、多数並べてもなめらかに動きます。タッチ端末ではホバーが効かないので、押せることが分かる別の手がかりも用意しておくと安心です。動きに敏感な利用者へは prefers-reduced-motion で移動を抑え、影の変化だけ残すと配慮が行き届きます。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
浮き上がる高さや影の強さは変えられますか
変えられます。高さは :hover の translateY、影の広がりや濃さは box-shadow の値で調整できます。
たくさん並べても動作は重くなりませんか
transform と box-shadow のアニメーションは比較的軽く、レイアウトを再計算しないため、多数並べてもなめらかに動きやすいです。