∞ forever components

Cards

Image Zoom + Caption Rise

A card with a conic-gradient art panel that scales up on hover while an eyebrow label and title rise into view from beneath a dark gradient shade.

csslight complexitysubtle 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

Featured article cards, portfolio thumbnails, or product tiles where hover reveals contextual text without cluttering the resting state.

When not to

Touch-only interfaces where hover states never fire. Layouts requiring always-visible captions — the text is hidden at rest.

Working with an AI agent

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

Change the eyebrow text to 'New Release', set --accent-cyan to #f59e0b, and increase the zoom scale from 1.14 to 1.22 in .c10-zoom__img. 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

  • accent color (--accent-cyan)
  • zoom scale (1.14 in transform:scale)
  • caption text (eyebrow + h3)
  • transition duration (--dur-slow: 520ms)
  • shade gradient stop (rgba(8,9,13,0.88))
  • idle demo cadence (DEMO_ON=1900 / DEMO_OFF=1700 / DEMO_FIRST=400 ms, resume IDLE_RESUME=3500 ms)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • prefers-reduced-motion guard (transition-duration:.001ms)
  • visibilitychange stop/start pattern
  • IIFE wrapper
  • 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 art is a CSS gradient only — no real image; swap .c10-zoom__img background for a real image URL to use in production

cardhoverzoomcaptioncss-transitionui-componentimage-card

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.
  • Reveal on HoverDark gradient card that dims and zooms its background art on hover while a hidden title-and-copy panel slides up from the bottom.
  • Holographic IridescentA 3D-tilting card with a warm iridescent sheen and conic foil chip that shift with pointer position; drifts idly when not hovered.