← All motion patterns
Card lift on hover
SubscriptionA card that rises six pixels on hover and settles two down on press.
Transform and box-shadow move together on the same 200ms curve, so the lift and the shadow that explains it never separate — which is the detail that makes a hovered card read as raised rather than merely moved. The active state drops to two pixels rather than returning to zero, so a press feels like resistance rather than a cancel. Under reduced motion the transform is dropped entirely and only the shadow transitions, which keeps the affordance without the movement.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
See plans