<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 */Live preview updates as you type
Building preview…