Scale on hover

Subtle scale-up on hover — the simplest interactive feedback.

Hover me

Me too

And me

Widely Supported

animationno-js

Quick implementation

.scale-hover {
  transition: transform 0.2s ease-out;
}

.scale-hover:hover {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .scale-hover { transition: none; }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building hover interactions.

Goal: A reusable scale-on-hover effect using CSS transform — no JavaScript.

Technical constraints:
- Use transform: scale() only — no width/height changes that trigger layout.
- Transition: 0.2s ease-out for a responsive feel.
- Scale factor: 1.05 for subtle, 1.1 for pronounced.
- Use oklch() for any demo colors, not hex or rgba().
- Include @media (prefers-reduced-motion: reduce) to disable transition.

Framework variant (pick one):
A) Vanilla CSS utility class.
B) React hook — useScaleHover() that returns onMouseEnter/Leave handlers with spring physics.

Edge cases to handle:
- The element must not shift surrounding content (transform doesn't affect layout).
- Overflow on parent containers may clip the scaled element — add overflow: visible if needed.
- Touch devices: :hover persists after tap — consider @media (hover: hover) guard.

Return CSS.

Why this matters in 2026

Scale on hover is the most common interactive feedback pattern — cards, images, buttons, and grid items all benefit from it. It communicates "this is interactive" without any JavaScript. The transform property makes it zero-cost for performance.

The logic

transform: scale(1.05) enlarges the element by 5% from its center point. The transition smooths the change over 0.2 seconds. Because transform does not trigger layout recalculation, surrounding elements stay in place — the scaled element simply overlaps slightly.

Accessibility & performance

Wrap the hover in @media (hover: hover) to prevent the effect from sticking on touch devices. prefers-reduced-motion: reduce disables the transition. The animation runs entirely on the GPU compositor — no layout, no paint, pure 60fps performance.