∞ forever components

Cards

Reveal on Hover

Dark gradient card that dims and zooms its background art on hover while a hidden title-and-copy panel slides up from the bottom.

csslight complexitymoderate motionhover

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Product cards, portfolio thumbnails, or any card UI where secondary text should stay hidden until the user expresses intent.

When not to

Touch-only interfaces where hover state is unreliable; also remove the auto-cycle timer before shipping in production.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the card title from 'Slide Reveal' to 'Aurora', set --accent-magenta to #00f5c4, and slow the panel slide to 700ms by updating --dur-slow. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • panel slide duration (--dur-slow: 520ms)
  • accent gradient colors (--accent-magenta, --accent-iris)
  • panel translateY offset (56%)
  • idle demo cadence (DEMO_ON=1800 / DEMO_OFF=1500 / DEMO_FIRST=400 ms, resume IDLE_RESUME=3500 ms)
  • card dimensions (48vmin / 57vmin)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • prefers-reduced-motion guard (transition-duration:.001ms)
  • IIFE wrapper
  • visibilitychange stop/start
  • :focus-within selector for keyboard access
  • idle demo cycle (setInterval step() + hold()/release() takeover — the demo class shares every rule with :hover)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background is a CSS gradient, not a real image; swap in an actual img/background-image for real content

cardrevealhoverslide-upgradientui-componentcss-transition

More Cards components

  • 3D Tilt ParallaxDark card tilts in 3D toward the cursor; badge, orb, and text layers float at distinct Z-depths. A radial shine tracks the pointer; auto-rotates when idle.
  • Frosted GlassA frosted glass card floats over three slowly drifting color blobs (gold, cream, tan); the panel lifts slightly on hover.
  • Spotlight HoverDark card with a peach radial glow and a CSS-masked grid that both track the cursor; auto-orbits when the pointer is away.
  • Gradient-Border GlowDark card framed by a spinning conic powder-blue, tan and slate gradient border with a soft blurred aura glow behind it; auto-rotates continuously.
  • Holographic IridescentA 3D-tilting card with a warm iridescent sheen and conic foil chip that shift with pointer position; drifts idly when not hovered.
  • Stacked Peeking CardsThree layered gradient cards auto-cycle and fan out with a springy rotation on hover; cards spread left and right then restack when cursor leaves.