card caption hover media overlay Tailwind media cards with hoverable caption overlays blog or case-study teasers with image-first presentation gallery and promo tiles with a clearer hover state plain image cards feel too inert need a hover caption without complex 3D transforms want a card reveal pattern that still fits normal Tailwind card markup
Caption Slide Card
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/caption-slide-card.json Background
Customize
Quick Start
<article class="caption-slide-card relative overflow-hidden rounded-3xl"><div class="caption-slide-body p-6 text-white">...</div></article>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 744 bytes · 32 lines
- Custom Properties
-
--caption-slide-distance--caption-slide-duration - Classes
-
.caption-slide-card.caption-slide-body
card caption hover media overlay
This is a practical caption-hover card for Tailwind grids. It works well when you want an image-first teaser but still need a readable text block that becomes more prominent on interaction.
Gallery or article teaser
<article class="caption-slide-card relative overflow-hidden rounded-3xl">
<div class="caption-slide-body p-6 text-white">
<h3 class="text-xl font-semibold">Project spotlight</h3>
<p class="mt-2 text-sm text-white/70">The caption lifts into place on hover.</p>
</div>
</article>