Sections

Hover transitions

Hover transition effects allow you to create engaging interactions on your page.

Usage

Use hover:{transition} to apply an on-hover transition effect to an element.

Examples

Backward

"hover:backward"

Forward

"hover:forward"

Float

"hover:float"

Sink

"hover:sink"

Grow

"hover:grow"

Shrink

"hover:shrink"

Rotate

"hover:rotate"

Grow rotate

"hover:grow-rotate"

Bounce in

"hover:bounce-in"

Bounce out

"hover:bounce-out"

Skew

"hover:skew"

Skew backward

"hover:skew-backward"

Skew forward

"hover:skew-forward"

Shadow

"hover:shadow"