Hover Lift
ホバーリフト
どんな動き？
カード等の要素にカーソルを乗せると、わずかに上へ浮き上がりながら影が濃くなるアニメーション。指で摘み上げたような軽い浮遊感を演出でき、クリック可能であることを直感的に伝えられる。カードUIやボタンなど、インタラクティブ要素の定番ホバー表現として広く使われる。
よく使う場所
カードボタンサムネイル
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Lift the element slightly upward and deepen its shadow on hover.Trigger:
Mouse enters the element (hover).
Initial state:
translateY: 0
box-shadow: soft, close shadow
Animation:
The element moves upward while its shadow grows larger and softer, suggesting it has lifted off the surface.
Final state:
translateY: -10px
box-shadow: larger, more diffuse shadow
Reverses smoothly on mouse leave.
Timing:
duration: 0.3s, easing: ease-out.実装方法の候補
この動きは以下の技術で実装できます。
CSS :hover + transform + box-shadow
別名・関連ワード
Hover ElevateCard LiftHover Float Up