Hover lift

Raise a surface slightly when it is hovered or focused.

Live preview Try the effect

HOVER TO EXPLORE

Everything is ready

Make every change feel natural.

View project

240ms · ease-out

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Raise a surface slightly when it is hovered or focused. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Clickable cards and action surfaces.

Related concepts

A lift communicates interactivity; it should not imply that a noninteractive card is clickable.

Describe this effect

Output language

On hover or keyboard focus, slightly raise the card and strengthen its shadow. Restore it when focus or hover leaves. Use a 240ms ease-out transition. Show the final state immediately when reduced motion is requested.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.