Hover-Cards

Cards, die auf Hover reagieren: Lifts, Flips, Reveals und Rahmenwechsel, jeweils mit Reduced-Motion-Guard.

Designing for quiet interfaces

Why the best screens are the ones you barely notice, and how to get there.

C 001Ruhiger Inhalt

Typography audit checklist

Twelve checks before you ship a type scale.

Open checklist

C 006Medien links Zeile

New

Linen weekender bag

$120 ~~$150~~

C 020Badge In den Warenkorb

Lift and glow

Rises on hover and casts a tinted shadow instead of a gray one.

C 036Getöntes Glow-Anheben

Perspective tilt

Rotates in 3D on hover, with the badge floating above the surface.

C 037Perspektivische Neigung

Hover to flip

Front side

Back side

Rotates 180deg on the Y axis.

C 038Flip beim Hover

Tap to revealWhat is the CSS trick? :checked + siblingTap again to flip back

C 039Flip per Tipp

Drop files here or click to browse PNG, JPG or SVG up to 10 MB

C 053Upload-Dropzone

Line numbers in errors

Every stack trace links to the file and line.

C 063Feature mit Icon-Kachel

Layout primitives

Stack, cluster, sidebar and grid. Compose pages without writing media queries.

Explore

C 064Gradient-Icon

Kenji Watanabe

Motion designer · Tokyo

After EffectsRiveCSS

C 068Gradient-Ring Skills

Senior Product Designer

Oxide Labs · Remote (EU)

€90k+

Full-timeDesign systemsFigma

C 082Stellenanzeige

3 drafts

Hover to fan the pile.

C 088Aufgefächertes Deck

Spotlight

A radial highlight grows from the corner on hover, no pointer tracking needed.

C 089Eck-Spotlight

Live

Neon edge

Layered box-shadows fake a glowing tube around the border.

C 092Neonröhren-Kante

12:04 Building a flip card with zero JavaScript designforai · 18k views

C 098Play-Thumbnail

Look für die ganze Seite: der Kinetisch / Motion-first-Prompt. Regale in der Nähe: pricing-cards, profil-cards, bild-cards.