ホバーで浮くカード
マウスを乗せると影が深くなり、カードがふわっと浮き上がる定番の演出です。仕組みは transition で transform と box-shadow の変化をなめらかにつなぎ、 :hover 時に translateY(-6px) で少し上へ動かしつつ影を大きくしています。
解説
マウスを乗せると影が深くなり、カードがふわっと浮き上がる定番の演出です。仕組みは transition で transform と box-shadow の変化をなめらかにつなぎ、:hover 時に translateY(-6px) で少し上へ動かしつつ影を大きくしています。要素そのものの位置はレイアウトに影響しない transform で動かしているため、周りのカードがずれずに軽快に動くのが特徴です。JavaScript は不要で、CSS だけで成立します。
向いている使い方
- 商品やプランを並べた一覧で、触れる要素であることを伝える
- ブログ記事カードや事例紹介のサムネイル
- ダッシュボードのメニュータイルやリンクパネル
浮く高さや影の濃さは translateY の値と box-shadow の不透明度で調整します。動きを強くしすぎると安っぽく見えるため、6px前後の控えめな移動に留めるのが上品です。cursor:pointer を付けてクリックできる見た目に揃えると操作の予測が立ちます。動きに敏感な利用者へ配慮するなら prefers-reduced-motion のメディアクエリで transition を無効化 し、影だけを変える形にしておくと安心です。タッチ端末ではホバーが効かないため、フォーカスやタップでも同じ強調がかかるようにしておくと取りこぼしがありません。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
浮き上がる高さや影の強さは調整できますか
できます。hover時のtranslateYの値を小さくすれば控えめに、大きくすれば派手になります。影はbox-shadowの広がりと不透明度で決まるので、数値を下げると軽い印象に整います。6px前後の移動が上品でおすすめです。
スマートフォンではホバーが効きませんが大丈夫ですか
タッチ端末ではホバーが発生しないため、この浮き上がりは表示されません。重要な操作の手がかりにする場合は、フォーカスやタップ時にも同じ強調がかかるよう指定を足しておくと、どの端末でも違和感がなくなります。