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

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