फ़ीचर्डनया
इमेजCaptioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 फ्रेमवर्कशुरुआती
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 | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
srcआवश्यक | string | - | कार्ड की तस्वीर के लिए इमेज URL। |
imageAlt | string | '' | इमेज के लिए वैकल्पिक टेक्स्ट। जब title में पहले से नाम हो तो खाली रखें। |
placeholder | string | - | Placeholder |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
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.