Cards
Card Hover Lift
A card that rises and deepens its shadow on hover. Pure CSS transition.
Card title
Supporting copy goes here.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.card-lift {
transform: translate3d(110px, 75px, 0);
box-shadow: 0px 6px 18px 0px #00000055;
width: 260px;
height: 170px;
background: #1c1e2a;
border-radius: 20px;
color: #e7e9ee;
font-size: 14px;
transition: transform 240ms ease-out, box-shadow 240ms ease-out;
}
.card-lift:hover {
transform: translate3d(110px, 67px, 0);
box-shadow: 0px 22px 44px 0px #00000077;
}
@media (prefers-reduced-motion: reduce) {
.card-lift {
animation: none;
transition: none;
}
}Why it is built this way
The lift uses transform, not margin or top — those trigger layout and make every sibling recalculate. Growing the shadow as the card rises is what sells the height; lifting without it just looks like the card slid.
What it animates
No keyframes at all — this one is built from interaction states, so the browser only does anything when the visitor does.
What it costs to run
Nothing here runs on a timer. The motion lives entirely in :hover, which compiles to a transition — so it costs nothing until the visitor does something, and it interrupts and reverses cleanly halfway through.
Accessibility
A reader who never triggers :hover never sees this, so it carries no risk on load. Worth adding a :focus-visible state alongside it: as written, a keyboard user gets no feedback at all.