<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…