FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<html> HTML
<article class="lift"> <h2>Hover me</h2> <p>Smooth elevation and scale on hover.</p> </article>
# CSS
/* TODOs: 1) Add a transition on transform and box-shadow for smooth motion. 2) On .lift:hover, increase elevation (box-shadow) and apply a slight transform (scale or translateY). 3) Respect reduced motion using @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } */ body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 2rem; background: #fafafa; color: #111; } .lift { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.06); /* Add transition here */ } /* Add .lift:hover and reduced-motion styles below */
Preview
Live preview updates as you type
Building preview…
Show preview