CSS Slide Up Effect on Hover Using Transform

Slide Up with Transform Transition

A slide-up effect moves an element vertically when the user hovers over it. Using transform: translateY() instead of top or margin-top ensures the animation is GPU-accelerated and does not trigger layout recalculations.

CSS Code

.card {
  transform: translateY(0);
  transition: transform 0.4s ease-out;
}

.card:hover {
  transform: translateY(-8px);
}

Why Transform Instead of Position?

When you animate top, margin, or padding, the browser must recalculate the layout of surrounding elements on every frame. This causes "layout thrashing" and janky animation. transform operates on the composite layer, so the GPU handles the movement without affecting layout.

Timing Function: ease-out

The ease-out curve starts fast and decelerates toward the end. This mimics natural deceleration — like an object sliding up and coming to a gentle stop — and feels more natural than linear.

Combining with Other Properties

A common pattern pairs the slide-up with a shadow increase:

.card {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

This creates the illusion that the card is lifting off the page.