Pointer affordance

CSS Hover Effects for Product UI

Hover is a preview of interactivity, not the interaction itself. Use it to reinforce affordance on pointer devices, mirror the important treatment on focus-visible, and keep the underlying control fully usable on touch screens.

Use capable pointers: Gate hover-only polish behind hover support.
Mirror focus: Keyboard users deserve the same affordance.
Protect layout: Animate transforms and opacity instead of geometry.

Pattern examples

6 ways to communicate the state change

Hover, focus, press, or toggle the specimens. Each recipe keeps the durable state in semantic markup and uses animation as a supporting layer.

Lift

Move a card up by a few pixels and strengthen its shadow to imply elevation.

Two to four pixels is usually enough; large movement makes surrounding content feel unstable.

transition: transform 180ms ease-out, box-shadow 180ms ease-out;
&:hover { transform: translateY(-3px); }

Glow ring

Increase a colored outer ring around a compact interactive surface.

Keep contrast strong enough that the control still has a boundary when the glow is absent.

transition: box-shadow 180ms ease-out;
&:hover { box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 18%, transparent); }

Scale up

Enlarge a self-contained icon or tile slightly while keeping its center anchored.

Avoid scaling text-heavy cards because rasterization and line movement can reduce readability.

transition: transform 160ms ease-out;
&:hover { transform: scale(1.035); }

Underline grow

Expand a line beneath a text link from its reading origin.

Do not remove the browser focus indication; the underline is supplemental feedback.

&::after { transform: scaleX(0); transform-origin: left; }
&:hover::after { transform: scaleX(1); }

Card reveal

Fade supporting text or an action into a card once its primary target is engaged.

Keep the revealed action in the tab order and expose it without hover on touch-first layouts.

transition: opacity 180ms ease-out, transform 180ms ease-out;

Image zoom

Scale media inside an overflow-hidden frame while the card itself stays fixed.

Keep the focal point stable and avoid zooming so far that the subject is cropped unexpectedly.

transition: transform 300ms ease-out;
.card:hover img { transform: scale(1.05); }

Implementation check

Ship the fallback with the effect.

Test keyboard focus, touch, reduced motion, slow work, failure, repeated activation, and the final resting state. A robust interaction remains understandable when every transition is removed.

@media (prefers-reduced-motion: reduce) {
  .motion {
    animation: none;
    transform: none;
    transition-duration: 0.01ms;
  }
}

Continue the reference

Related micro-interaction guides

Compare the neighboring feedback patterns before choosing an effect.

View all patterns

Buttons & formsExplore toggle, search, checkbox, counter, and press micro-interactions with practical timing, accessibility, and CSS examples.Read guide Feedback & validationDesign loading, error, success, copy, notification, and tooltip micro-interactions that confirm actions without relying on motion alone.Read guide Status & progressUse skeletons, progress bars, spinners, and pulsing dots to communicate loading states and task completion without layout shifts.Read guide

Plan the complete React experience.

Map the components and states around these interactions, then generate the project structure from one visual workspace.

Start planning free