Hover Lift

A micro-interaction pattern that lifts elements on hover using translateY and an enhanced shadow, providing tactile feedback.

Live Demo

Subtle (2px)

Hover me

Default (4px)

Hover me

Dramatic (8px)

Hover me

CSS Implementation

css

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

React Implementation

tsx

const [hovered, setHovered] = useState(false);

<div
  onMouseEnter={() => setHovered(true)}
  onMouseLeave={() => setHovered(false)}
  style={{
    transform: hovered ? "translateY(-4px)" : "translateY(0)",
    boxShadow: hovered
      ? "0 8px 24px rgba(0,0,0,0.1)"
      : "0 1px 3px rgba(0,0,0,0.06)",
    transition: "transform 0.2s ease, box-shadow 0.2s ease",
    borderRadius: 12,
  }}
>
  Card content
</div>

Lift Variants

Prop	Type	Default	Description	Required
subtle	`2px lift`	0 4px 12px rgba(0,0,0,0.08)	For list items and small interactive elements	No
default	`4px lift`	0 8px 24px rgba(0,0,0,0.1)	Standard card hover effect	No
dramatic	`8px lift`	0 16px 40px rgba(0,0,0,0.12)	For hero cards or feature highlights	No

Guidelines

Always pair translateY with an increased box-shadow for a realistic lift.
Keep transition duration between 150ms-250ms for responsive feel.
Use ease or ease-out timing functions, never linear.
Apply only to interactive elements (cards, buttons, links).
Use the "subtle" variant for dense lists to avoid excessive motion.