カード ホバーで浮き上がる
マウスを乗せるとカードがふわっと上に浮き上がる、王道のホバー演出です。 :hover のときに transform: translateY() でカードを少し上へ移動させ、同時に box-shadow を濃く大きくして「持ち上がって影が伸びた」ように見せています。
解説
マウスを乗せるとカードがふわっと上に浮き上がる、王道のホバー演出です。:hover のときに transform: translateY() でカードを少し上へ移動させ、同時に box-shadow を濃く大きくして「持ち上がって影が伸びた」ように見せています。動きには cubic-bezier のイージングを使い、最後にわずかに弾む自然な質感を出しているのがポイントです。CSSのみで動くためJavaScriptは不要です。
使う場面
- 商品一覧やサービス紹介のカード型レイアウト
- ブログ記事や実績のサムネイル一覧
- クリックできることをさりげなく伝えたい要素全般
浮き上がる高さは translateY の数値、影の濃さや広がりは box-shadow で調整します。transition の秒数を変えれば、軽快にもゆったりにもできます。cursor:pointer を添えてクリック可能だと伝えている点も実用的です。複数カードを並べる用途を想定しているため、グリッドに並べてそのまま使えます。transform はレイアウトを崩さず描画も軽いので、たくさん並べても動作はなめらかです。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
浮き上がる高さや影を調整できますか？
できます。ホバー時の translateY の値を大きくするとより高く浮き、box-shadow の数値を変えると影の濃さや広がりを調整できます。transition の秒数で速さも変えられます。
カードの中身（画像やボタン）を変えても使えますか？
使えます。浮き上がる効果はカード全体にかかるため、上部の色面を写真に差し替えたり、本文にボタンを足したりしても、そのままホバーの動きが効きます。