Hover

Extended Module

15 micro-interaction effects triggered on cursor hover. Uses CSS transitions for reversible, polished feel — move in and out to see both directions.

gleam-hover.css 15 effects CSS transitions reversible

<!-- Single class — no .gleam base needed for hover effects -->
<button class="hover-lift">Hover me</button>

<!-- Stack with entrance for a full animation lifecycle -->
<div class="gleam entrance-fade-up hover-lift hover-glow">Card</div>

<!-- 3D tilt requires tilt.js -->
<script src="gleam/tilt.min.js"></script>
<div class="hover-3d">Auto-wired by tilt.js</div>

Transition Effects — hover each card

hover-lift

Rises + deep shadow

hover-glow

Ambient radiance ring

hover-scale

Spring-bouncy scale

hover-press

Physical depression

hover-blur

Defocus + dim

hover-skew

Spring skew tilt

hover-glass

Frosted glass surface

hover-reveal

Dim → full opacity

Animation Effects — hover to trigger

🔔

hover-shake

Micro-rotation burst

❤️

hover-pulse

Breathing scale loop

⚙️

hover-spin

One-shot 360°

🚀

hover-float

Sustained float loop

Link & Button Effects

hover-underline

Navigation link Colored variant Pink variant

hover-hollow

hover-3d — Cursor-Tracked 3D Tilt

Requires tilt.js. Move your cursor across the cards — the tilt follows in real time via --hx / --hy CSS properties.

Move over me

And me too

Over here

<!-- tilt.js auto-wires all .hover-3d elements on load -->
<div class="hover-3d">Tilts toward cursor</div>

/* CSS drives the transform — JS just sets custom properties */
.hover-3d:hover {
  transform: perspective(600px)
    rotateY(calc(var(--hx) * 12deg))
    rotateX(calc(var(--hy) * -12deg))
    scale(1.02);
}

/* Customize tilt intensity */
.my-card { --tilt-strength: 15; }

Stacking Hover Effects

Hover effects use orthogonal CSS properties — stack them freely without conflicts.

lift + glow

scale + shake

3d + glow

all three

<div class="gleam entrance-fade-up hover-lift hover-glow">Card</div>
<div class="hover-3d hover-glow" style="--gradient-from:#f472b6">Pink glow tilt</div>