33 Tailwind CSS Card Hover Effects
11 / 33

All 33 in 33 Tailwind CSS Card Hover Effects

  1. 01Tailwind 3D Tilt & Parallax Card with Depth Layers
  2. 02Tailwind Glowing Gradient & Glassmorphic Border Card
  3. 03Tailwind Image Zoom Card with Slide-Up Content Reveal
  4. 04Tailwind 3D Flip Card (Front to Back) with backface-visibility
  5. 05Tailwind Sibling De-emphasis Pricing Grid with has-hover
  6. 06Tailwind Minimalist Elevation Card with Layered Dynamic Shadows
  7. 07Tailwind Elastic Lift Card with Spring Cubic-Bezier
  8. 08Tailwind Animated Conic Gradient Border Card with @property
  9. 09Tailwind Stacked Layer Reveal Card (Fanned Risograph Deck)
  10. 10Tailwind Holographic Foil Shimmer Card with mix-blend-mode
  11. 11Tailwind Curtain Reveal Card (Parting Velvet Halves)
  12. 12Tailwind Corner Peel Card with clip-path Triangles
  13. 13Tailwind Neon Sign Card with Layered Text-Shadow Glow
  14. 14Tailwind CRT Scanline Terminal Card with Sweeping Beam
  15. 15Tailwind Depth Parallax Landscape Card with Layer Multipliers
  16. 16Tailwind Cursor Spotlight Card with Masked Border Highlight
  17. 17Tailwind 3D Tilt Product Card with Specular Glare
  18. 18Tailwind Slide-Up Panel Card with Peek Header Swap
  19. 19Tailwind Credit Card Flip with Magnetic Strip & CVV
  20. 20Tailwind RGB Channel-Split Glitch Card
  21. 21Tailwind Rotating Conic Aura Card with Blurred Gradient Bloom
  22. 22Tailwind Blob-to-Rectangle Border Morph Card
  23. 23Tailwind Magnetic Float Orb Card with Pointer Attraction
  24. 24Tailwind Typewriter Reveal Card with Steps Animation & Caret
  25. 25Tailwind Magazine Overlay Slide Card (Full-Face Panel Takeover)
  26. 26Tailwind Breathing Film Grain Card with SVG Turbulence Noise
  27. 27Tailwind Frosted Glass Intensify Card with Deepening Backdrop Blur
  28. 28Tailwind Blueprint Reveal Card with Circular clip-path Wipe
  29. 29Tailwind Cursor-Anchored Shockwave Ripple Card
  30. 30Tailwind Color-Burn Ignition Card with Grayscale-to-Fire Hover
  31. 31Tailwind Prismatic Light Sweep Card with Screen Blend Bar
  32. 32Tailwind Book Cover Open Card with Hinged 3D Rotation
  33. 33Tailwind Drifting Aurora Ribbons Card with Blurred Gradient Bands
Pure TailwindMIT licensed

Tailwind Curtain Reveal Card (Parting Velvet Halves)

Two striped velvet halves part on hover to unveil the stage behind, gold seam and all. Nothing here needs custom CSS: the drapes are bg-[repeating-linear-gradient(…)], the part is two group-hover: translates, and the theatrical easing is one arbitrary curve.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tch-11 w-full min-h-svh grid place-items-center bg-tch11-bg font-tch11-sans p-8">
  <article tabindex="0" class="group relative w-[340px] h-[460px] rounded-md overflow-hidden cursor-pointer outline-none shadow-[0_20px_50px_rgb(0_0_0/0.5)] focus-visible:outline-3 focus-visible:outline-tch11-gold focus-visible:outline-offset-4">
    <div class="absolute inset-0 flex flex-col justify-center items-center text-center p-10 text-tch11-ink bg-[linear-gradient(rgb(20_8_12/0.55),rgb(20_8_12/0.75)),radial-gradient(circle_at_50%_35%,#5a2030,#1a0d12_70%)]">
      <span class="font-tch11-display italic text-base tracking-[0.2em] text-tch11-gold">— ACT III —</span>
      <h2 class="font-tch11-display font-extrabold text-[2.6rem] leading-[1.05] my-3">The Velvet<br>Hour</h2>
      <p class="text-[1.15rem] leading-[1.5] text-tch11-body">An evening of chamber music and candlelight. Doors open at eight.</p>
    </div>
    <div class="absolute inset-y-0 left-0 w-1/2 z-2 pointer-events-none origin-left bg-[repeating-linear-gradient(90deg,#7a1f2b_0_10px,#5e1620_10px_20px)] shadow-[inset_0_0_40px_rgb(0_0_0/0.4)] transition-transform duration-700 ease-[cubic-bezier(0.77,0,0.18,1)] group-hover:-translate-x-full group-focus-visible:-translate-x-full motion-reduce:transition-opacity motion-reduce:group-hover:translate-x-0 motion-reduce:group-hover:opacity-0 after:content-[''] after:absolute after:inset-0 after:bg-linear-to-r after:from-transparent after:to-black/25"></div>
    <div class="absolute inset-y-0 right-0 w-1/2 z-2 pointer-events-none origin-right bg-[repeating-linear-gradient(90deg,#7a1f2b_0_10px,#5e1620_10px_20px)] shadow-[inset_0_0_40px_rgb(0_0_0/0.4)] transition-transform duration-700 ease-[cubic-bezier(0.77,0,0.18,1)] group-hover:translate-x-full group-focus-visible:translate-x-full motion-reduce:transition-opacity motion-reduce:group-hover:translate-x-0 motion-reduce:group-hover:opacity-0 after:content-[''] after:absolute after:inset-0 after:bg-linear-to-l after:from-transparent after:to-black/25"></div>
    <div class="absolute inset-y-0 left-1/2 w-0.5 z-3 pointer-events-none -translate-x-1/2 opacity-80 bg-linear-to-b from-tch11-gold to-tch11-gold2 transition-opacity duration-400 group-hover:opacity-0 group-focus-visible:opacity-0"></div>
    <span class="absolute inset-x-0 bottom-6 z-4 text-center pointer-events-none font-tch11-display italic text-tch11-ink text-[1.1rem] tracking-[0.1em] transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0">Hover to part the curtain</span>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch11-bg: #1a0d12;
  --color-tch11-bg: oklch(0.19 0.04 15);
  --color-tch11-ink: #f3e3d3;
  --color-tch11-ink: oklch(0.93 0.03 65);
  --color-tch11-body: #cbb8a6;
  --color-tch11-body: oklch(0.79 0.03 65);
  --color-tch11-gold: #d4a373;
  --color-tch11-gold: oklch(0.75 0.08 65);
  --color-tch11-gold2: #8a5a2b;
  --color-tch11-gold2: oklch(0.52 0.09 65);
  --font-tch11-sans: 'Cormorant Garamond', Georgia, serif;
  --font-tch11-display: 'Playfair Display', Georgia, serif;
}

.tch-11 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tch11-bg: #1a0d12;
  --color-tch11-bg: oklch(0.19 0.04 15);
  --color-tch11-ink: #f3e3d3;
  --color-tch11-ink: oklch(0.93 0.03 65);
  --color-tch11-body: #cbb8a6;
  --color-tch11-body: oklch(0.79 0.03 65);
  --color-tch11-gold: #d4a373;
  --color-tch11-gold: oklch(0.75 0.08 65);
  --color-tch11-gold2: #8a5a2b;
  --color-tch11-gold2: oklch(0.52 0.09 65);
  --font-tch11-sans: 'Cormorant Garamond', Georgia, serif;
  --font-tch11-display: 'Playfair Display', Georgia, serif;
}

.tch-11 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,800;1,500&family=Cormorant+Garamond:wght@400;500&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • A full-CSS effect that ports with zero stylesheet residue — drapes, stripes, seam and easing all fit in utilities.
  • The two halves are near-identical class lists differing only in anchor and direction. That duplication is the cost Tailwind charges for symmetry; a component abstraction is the answer if this ships in a framework.
  • UI change from the CSS original: focusable card with a gold ring, drapes part on group-focus-visible:, and a reduced-motion fade instead of a dead transition.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Curtain Reveal Card (Parting Velvet Halves)
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-curtain-reveal-card-hover-effect/

Two striped velvet halves part on hover to unveil the stage behind, gold seam and all. Nothing here needs custom CSS: the drapes are bg-[repeating-linear-gradient(…)], the part is two group-hover: translates, and the theatrical easing is one arbitrary curve.
## HTML
```html
<section class="tch-11 w-full min-h-svh grid place-items-center bg-tch11-bg font-tch11-sans p-8">
  <article tabindex="0" class="group relative w-[340px] h-[460px] rounded-md overflow-hidden cursor-pointer outline-none shadow-[0_20px_50px_rgb(0_0_0/0.5)] focus-visible:outline-3 focus-visible:outline-tch11-gold focus-visible:outline-offset-4">
    <div class="absolute inset-0 flex flex-col justify-center items-center text-center p-10 text-tch11-ink bg-[linear-gradient(rgb(20_8_12/0.55),rgb(20_8_12/0.75)),radial-gradient(circle_at_50%_35%,#5a2030,#1a0d12_70%)]">
      <span class="font-tch11-display italic text-base tracking-[0.2em] text-tch11-gold">— ACT III —</span>
      <h2 class="font-tch11-display font-extrabold text-[2.6rem] leading-[1.05] my-3">The Velvet<br>Hour</h2>
      <p class="text-[1.15rem] leading-[1.5] text-tch11-body">An evening of chamber music and candlelight. Doors open at eight.</p>
    </div>
    <div class="absolute inset-y-0 left-0 w-1/2 z-2 pointer-events-none origin-left bg-[repeating-linear-gradient(90deg,#7a1f2b_0_10px,#5e1620_10px_20px)] shadow-[inset_0_0_40px_rgb(0_0_0/0.4)] transition-transform duration-700 ease-[cubic-bezier(0.77,0,0.18,1)] group-hover:-translate-x-full group-focus-visible:-translate-x-full motion-reduce:transition-opacity motion-reduce:group-hover:translate-x-0 motion-reduce:group-hover:opacity-0 after:content-[''] after:absolute after:inset-0 after:bg-linear-to-r after:from-transparent after:to-black/25"></div>
    <div class="absolute inset-y-0 right-0 w-1/2 z-2 pointer-events-none origin-right bg-[repeating-linear-gradient(90deg,#7a1f2b_0_10px,#5e1620_10px_20px)] shadow-[inset_0_0_40px_rgb(0_0_0/0.4)] transition-transform duration-700 ease-[cubic-bezier(0.77,0,0.18,1)] group-hover:translate-x-full group-focus-visible:translate-x-full motion-reduce:transition-opacity motion-reduce:group-hover:translate-x-0 motion-reduce:group-hover:opacity-0 after:content-[''] after:absolute after:inset-0 after:bg-linear-to-l after:from-transparent after:to-black/25"></div>
    <div class="absolute inset-y-0 left-1/2 w-0.5 z-3 pointer-events-none -translate-x-1/2 opacity-80 bg-linear-to-b from-tch11-gold to-tch11-gold2 transition-opacity duration-400 group-hover:opacity-0 group-focus-visible:opacity-0"></div>
    <span class="absolute inset-x-0 bottom-6 z-4 text-center pointer-events-none font-tch11-display italic text-tch11-ink text-[1.1rem] tracking-[0.1em] transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0">Hover to part the curtain</span>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch11-bg: #1a0d12;
  --color-tch11-bg: oklch(0.19 0.04 15);
  --color-tch11-ink: #f3e3d3;
  --color-tch11-ink: oklch(0.93 0.03 65);
  --color-tch11-body: #cbb8a6;
  --color-tch11-body: oklch(0.79 0.03 65);
  --color-tch11-gold: #d4a373;
  --color-tch11-gold: oklch(0.75 0.08 65);
  --color-tch11-gold2: #8a5a2b;
  --color-tch11-gold2: oklch(0.52 0.09 65);
  --font-tch11-sans: 'Cormorant Garamond', Georgia, serif;
  --font-tch11-display: 'Playfair Display', Georgia, serif;
}

.tch-11 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The stage is always there. The revealed content sits at absolute inset-0 with no hidden state at all — it is simply covered. That matters: nothing is lazy-mounted, so the first hover cannot flash an empty card, and screen readers and search engines see the copy regardless of hover.

Each half moves its own way. Two 50%-wide absolute panels, one anchored left and one right, each translating a full width outward on group-hover:. overflow-hidden on the card is what keeps them from becoming visible sliding away.

The seam fades, the label fades. Both are group-hover:opacity-0 — small details, but the gold seam surviving an open curtain is exactly the kind of thing that makes an effect feel unfinished.

Make it yours

  • Cascade the halves with delay-75 on one for a slightly human, unsynchronised part.
  • Vertical variant: swap both translates for -translate-y-full / translate-y-full and make the halves 50%-tall.
  • Drape colour and stripe width live in the repeating-linear-gradient; tighter stripes read as finer fabric.

Gotchas — read before shipping

  • overflow-hidden is mandatory, or the drapes are visible outside the card mid-transition.
  • Give the drapes an explicit z- above the stage and keep pointer-events-none on them so focus and clicks reach the content.
  • Do not defer the stage content behind the hover state — the whole reveal depends on it already being rendered.
  • motion-reduce: gets a fade. Removing the transition entirely would snap two large panels across the card, which is worse than the animation.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms, transitions and clipping are universally supported; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

prefers-reduced-motiontw ↗

Arbitraryneeds bracket syntax

repeating linear gradienttw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →