Skip to content
WebTricks

Hover lift card

A card that smoothly lifts with a deeper shadow on hover, using a CSS transition.

  • card
  • hover
  • transition
  • shadow
  • effect
Lift6px
Speed200ms
Accent#7c5cff
HTML 
<div class="lift-card"><strong>Hover me</strong><p>I rise on hover with a softer, deeper shadow.</p></div>
CSS 
:root {
    --lift: 6px;
    --speed: 200ms;
    --accent: #7c5cff;
}

.lift-card {
    max-width: 280px;
    padding: 20px;
    border-radius: 14px;
    background: #1b1f2a;
    color: #fff;
    border-top: 3px solid var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    /* Animate only transform + shadow — both are cheap for the GPU */
    transition:
        transform var(--speed) ease,
        box-shadow var(--speed) ease;
}

.lift-card:hover,
.lift-card:focus-within {
    transform: translateY(calc(var(--lift) * -1));
    box-shadow: 0 calc(var(--lift) * 2 + 8px) 28px rgba(0, 0, 0, 0.35);
}

.lift-card p { margin: 6px 0 0; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
    .lift-card { transition: none; }
}

How it works

A transition interpolates between two states whenever a property changes — here the change is triggered by :hover.

  • Only transform and box-shadow are animated. Transforms are GPU-accelerated and don’t trigger layout, so the motion stays smooth (avoid animating top/margin/width).
  • translateY(negative) lifts the card; the shadow grows in proportion to sell the height.
  • :focus-within mirrors the effect for keyboard users.
  • prefers-reduced-motion disables the transition for people who opt out of motion — include it on anything that moves.