Transitions & Transforms: Lift on Hover

intermediate

By FrontendAtlas Editorial · Updated Jan 30, 2026

Create a hover lift effect with transform and transition. Combine a slight translate/scale with a deeper box-shadow to simulate elevation, and avoid layout-jank by animating only transform/opacity. Include a reduced-motion fallback.

Solution

Overview

Use transition to animate transform and box-shadow, then apply a small upward translate (and optional scale) on hover. This creates a smooth, GPU-friendly lift effect without triggering reflow. Add a prefers-reduced-motion rule to disable the animation for users who prefer less motion.

Approach — Transition + Hover Transform

Set a base card style with a subtle shadow. Add transition: transform 180ms ease, box-shadow 180ms ease. On :hover, apply transform: translateY(-4px) (or a tiny scale) and increase the shadow. For accessibility, wrap a @media (prefers-reduced-motion: reduce) rule that removes the transition and transform so the effect is static.

<html>

<article class='lift'>
  <h2>
    Hover me
  </h2>
  <p>
    Smooth elevation and scale on hover.
  </p>
</article>

# CSS

.lift {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.lift:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
@media (prefers-reduced-motion: reduce) {
  * {
  transition: none !important;
}
}

Notes & Pitfalls

Pitfalls

Forgetting to include box-shadow in the transition causes a snap in the shadow.
Using a large scale or translate can look jumpy; keep values subtle.

Techniques

Pair transform with shadow changes for convincing depth.
Use ease or ease-out for a natural feel; keep duration around 150–250ms.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep