FeaturedNew
ImagesCaptioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 frameworksBeginner
Loading…
A low-quality placeholder blurs in first, then the full image fades over it once loaded.
<!-- A gradient stands in while the photo loads; onload swaps opacity so the
real image fades in over it. A pure-CSS shimmer covers the wait. -->
<div class="relative aspect-video w-full max-w-md overflow-hidden rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700">
<img
src="/images/photo-6.jpg"
alt="City skyline through morning fog"
loading="lazy"
onload="this.style.opacity=1"
class="h-full w-full object-cover opacity-0 transition-opacity duration-500 motion-reduce:transition-none"
/>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
srcrequired | string | - | Image URL for the card's picture. |
imageAlt | string | '' | Alternative text for the image. Empty when the title already names it. |
placeholder | string | - | Placeholder |
className | string | - | Additional classes merged onto the root element. |
A gradient (or a tiny blurred `placeholder` image) fills the frame while the photo loads, then `onLoad` flips opacity so the real image fades in - no empty box, no jump. The `motion-reduce:transition-none` opt-out drops the fade for anyone who asked for less motion. The plain-HTML tab uses an inline `onload` opacity swap; the React tab tracks a `loaded` state instead.