Hover Lift
No library Beginner
Card floats upward and casts a deeper shadow on hover. Spring overshoot easing gives it a satisfying pop. Pure CSS transitions, no dependencies.
Card floats upward and casts a deeper shadow on hover. Spring overshoot easing gives it a satisfying pop. Pure CSS transitions, no dependencies.
Goal: Create a "Hover Lift" card animation.
Visual behavior: On hover the card translates upward by ~8px and its box-shadow deepens and spreads, creating the illusion of elevation. The motion has a slight spring overshoot so it pops rather than slides. On mouse-out it settles back smoothly.
Technique:
- transform: translateY(0) → translateY(-8px) on hover
- box-shadow: subtle at rest → deep layered shadow on hover (two layers: a wide diffuse shadow + a closer tighter one)
- transition: cubic-bezier(0.34, 1.2, 0.64, 1) for the transform (overshoot); ease for box-shadow
Accessibility: Wrap transform and box-shadow transitions in @media (prefers-reduced-motion: no-preference) or use motion-reduce:transition-none.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.