Hover Effects

Polished hover interactions — live demos in each card, then copy the CSS.

15 effects

Hover to lift

Lift Shadow

Card lifts with growing shadow on hover.

elevationDetails

Glow ring

Glow Ring

Radiant glow ring expands from element edge.

glowDetails

Shimmer

Shimmer Sweep

Bright shimmer sweeps across element on hover.

shimmerDetails

Fill ↑

Color Fill

Background fills from bottom to top on hover.

fillDetails

Scale ↑

Scale Up

Smooth spring scale-up on hover.

scaleDetails

Underline

Underline Slide

Underline grows from center outward on hover.

underlineDetails

Neon Border

Pulsing neon border appears on hover.

glowDetails

Rotate Icon

Element rotates 45° on hover — great for + / × icons.

iconDetails

Draw border

Border Draw

Border draws in from top-left corner on hover.

borderDetails

Front

Back!

Card Flip

Card flips to reveal back face — CSS 3D perspective.

3dDetails

DefaultRevealed!

Blur & Reveal

Content blurs and a hidden label fades in on hover.

revealDetails

Click ripple

Ripple Click

Ripple emanates from click point on interaction.

rippleDetails

3D Tilt

Requires JS

3D Tilt

Element tilts in perspective on mouse move (needs JS).

3dDetails

Spotlight

Requires JS

Spotlight

Radial light spotlight follows the cursor in the card.

lightDetails

Magnetic Pull

Requires JS

Magnetic Pull

Element is pulled toward the cursor (needs JS mousemove).

magneticDetails