👆

Interactions

Interactive patterns and hover effects that enhance user experience.

Sticker Rotations

Four rotation variations for sticker aesthetic

ROTATE-STICKER-1 rotate-sticker-1 (-8deg)

ROTATE-STICKER-2 rotate-sticker-2 (5deg)

ROTATE-STICKER-3 rotate-sticker-3 (-3deg)

ROTATE-STICKER-4 rotate-sticker-4 (12deg)

Sticker Positioning

Absolute positioning helpers for badges

Container with positioned stickers

Hover over stickers to see them lift

Top Left Top Right Bottom Left Bottom Right Top Center Bottom Center Middle Left Middle Right

sticker-top-left sticker-top-right sticker-bottom-left sticker-bottom-right sticker-top-center sticker-bottom-center sticker-middle-left sticker-middle-right

Hover Effects

Lift, scale, and rotate on hover

hover-lift

Moves up with expanded shadow

class="hover-lift"

hover-scale

Scales up slightly

class="hover-scale"

hover-rotate

Rotates slightly

class="hover-rotate"

Container Required

For sticker positioning to work, the parent element must have the sticker-container class (which sets position: relative).