33 Tailwind CSS Card Hover Effects
03 / 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 Image Zoom Card with Slide-Up Content Reveal

The dependable shop-grid workhorse: the image scales inside a clipped frame while a frosted detail sheet slides up from a peeking strip. This is the port where Tailwind is simply better — group-hover: and group-focus-within: replace four descendant selectors, and keyboard parity costs one extra variant instead of a new rule.

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-03 w-full min-h-svh grid place-items-center bg-tch03-bg font-tch03-sans p-8">
  <article class="group relative w-[330px] h-[440px] rounded-[18px] overflow-hidden bg-white cursor-pointer shadow-[0_14px_36px_rgb(60_50_40/0.12)]">
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute inset-0 scale-100 transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-112 group-focus-within:scale-112 motion-reduce:transition-none bg-[radial-gradient(circle_at_35%_30%,#ffe2c2_0_30%,transparent_31%),linear-gradient(150deg,#e8956b,#b6452f_70%)] after:content-[''] after:absolute after:left-1/2 after:top-[42%] after:size-[150px] after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-[50%_50%_48%_52%/60%_58%_42%_40%] after:bg-[linear-gradient(160deg,#6b3526,#3a1a12)] after:shadow-[0_20px_40px_rgb(0_0_0/0.25)]"></div>
    </div>
    <span class="absolute top-5 left-5 z-3 bg-tch03-ink text-white text-[0.68rem] font-bold tracking-[0.12em] uppercase px-3 py-1.5 rounded-full">New In</span>
    <div class="absolute inset-x-0 bottom-0 z-4 p-[1.4rem_1.5rem_1.6rem] bg-white/95 backdrop-blur-[6px] translate-y-[calc(100%-84px)] transition-transform duration-550 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:transition-none">
      <div class="flex justify-between items-baseline">
        <div>
          <h2 class="font-tch03-display font-semibold text-2xl text-tch03-ink">Terra Vase</h2>
          <p class="text-[0.8rem] text-tch03-mut mt-0.5">Hand-thrown stoneware</p>
        </div>
        <span class="font-bold text-xl text-tch03-acc">$68</span>
      </div>
      <p class="text-[0.84rem] leading-[1.55] text-tch03-body mt-3.5 mb-4">Matte terracotta with a subtle asymmetric lip. Each piece is wheel-thrown and one of a kind.</p>
      <a href="#" class="flex items-center justify-center min-h-11 rounded-[10px] bg-tch03-ink text-white no-underline font-semibold text-[0.88rem] transition-colors duration-200 hover:bg-tch03-acc focus-visible:outline-2 focus-visible:outline-tch03-acc focus-visible:outline-offset-2">View Product</a>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-tch03-bg: #f4f1ec;
  --color-tch03-bg: oklch(0.96 0.006 75);
  --color-tch03-ink: #2a2018;
  --color-tch03-ink: oklch(0.25 0.02 55);
  --color-tch03-body: #6a5e52;
  --color-tch03-body: oklch(0.5 0.02 65);
  --color-tch03-mut: #8a7d70;
  --color-tch03-mut: oklch(0.6 0.02 65);
  --color-tch03-acc: #b6452f;
  --color-tch03-acc: oklch(0.51 0.15 32);
  --font-tch03-sans: 'Manrope', system-ui, sans-serif;
  --font-tch03-display: 'Fraunces', Georgia, serif;
}

.tch-03 {
  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-tch03-bg: #f4f1ec;
  --color-tch03-bg: oklch(0.96 0.006 75);
  --color-tch03-ink: #2a2018;
  --color-tch03-ink: oklch(0.25 0.02 55);
  --color-tch03-body: #6a5e52;
  --color-tch03-body: oklch(0.5 0.02 65);
  --color-tch03-mut: #8a7d70;
  --color-tch03-mut: oklch(0.6 0.02 65);
  --color-tch03-acc: #b6452f;
  --color-tch03-acc: oklch(0.51 0.15 32);
  --font-tch03-sans: 'Manrope', system-ui, sans-serif;
  --font-tch03-display: 'Fraunces', Georgia, serif;
}

.tch-03 {
  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=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;700&display=swap">

What changed in the port

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

  • Four descendant selectors collapse into group-hover: on two children. This is the port's cleanest win in the collection.
  • duration-550 is a bare value v4 accepts directly — no @theme entry and no arbitrary bracket needed for an off-scale duration.
  • UI change from the CSS original: the CTA is a real link with a 44px target, and group-focus-within: now opens the sheet for keyboard users — the original listed that as a gotcha but never shipped it.
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 Image Zoom Card with Slide-Up Content Reveal
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-image-zoom-card-slide-up-content-reveal/

The dependable shop-grid workhorse: the image scales inside a clipped frame while a frosted detail sheet slides up from a peeking strip. This is the port where Tailwind is simply better &mdash; group-hover: and group-focus-within: replace four descendant selectors, and keyboard parity costs one extra variant instead of a new rule.
## HTML
```html
<section class="tch-03 w-full min-h-svh grid place-items-center bg-tch03-bg font-tch03-sans p-8">
  <article class="group relative w-[330px] h-[440px] rounded-[18px] overflow-hidden bg-white cursor-pointer shadow-[0_14px_36px_rgb(60_50_40/0.12)]">
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute inset-0 scale-100 transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-112 group-focus-within:scale-112 motion-reduce:transition-none bg-[radial-gradient(circle_at_35%_30%,#ffe2c2_0_30%,transparent_31%),linear-gradient(150deg,#e8956b,#b6452f_70%)] after:content-[''] after:absolute after:left-1/2 after:top-[42%] after:size-[150px] after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-[50%_50%_48%_52%/60%_58%_42%_40%] after:bg-[linear-gradient(160deg,#6b3526,#3a1a12)] after:shadow-[0_20px_40px_rgb(0_0_0/0.25)]"></div>
    </div>
    <span class="absolute top-5 left-5 z-3 bg-tch03-ink text-white text-[0.68rem] font-bold tracking-[0.12em] uppercase px-3 py-1.5 rounded-full">New In</span>
    <div class="absolute inset-x-0 bottom-0 z-4 p-[1.4rem_1.5rem_1.6rem] bg-white/95 backdrop-blur-[6px] translate-y-[calc(100%-84px)] transition-transform duration-550 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:transition-none">
      <div class="flex justify-between items-baseline">
        <div>
          <h2 class="font-tch03-display font-semibold text-2xl text-tch03-ink">Terra Vase</h2>
          <p class="text-[0.8rem] text-tch03-mut mt-0.5">Hand-thrown stoneware</p>
        </div>
        <span class="font-bold text-xl text-tch03-acc">$68</span>
      </div>
      <p class="text-[0.84rem] leading-[1.55] text-tch03-body mt-3.5 mb-4">Matte terracotta with a subtle asymmetric lip. Each piece is wheel-thrown and one of a kind.</p>
      <a href="#" class="flex items-center justify-center min-h-11 rounded-[10px] bg-tch03-ink text-white no-underline font-semibold text-[0.88rem] transition-colors duration-200 hover:bg-tch03-acc focus-visible:outline-2 focus-visible:outline-tch03-acc focus-visible:outline-offset-2">View Product</a>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch03-bg: #f4f1ec;
  --color-tch03-bg: oklch(0.96 0.006 75);
  --color-tch03-ink: #2a2018;
  --color-tch03-ink: oklch(0.25 0.02 55);
  --color-tch03-body: #6a5e52;
  --color-tch03-body: oklch(0.5 0.02 65);
  --color-tch03-mut: #8a7d70;
  --color-tch03-mut: oklch(0.6 0.02 65);
  --color-tch03-acc: #b6452f;
  --color-tch03-acc: oklch(0.51 0.15 32);
  --font-tch03-sans: 'Manrope', system-ui, sans-serif;
  --font-tch03-display: 'Fraunces', Georgia, serif;
}

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

How this works

Two children, one trigger. The card is the group. The image sits at scale-100 and goes to group-hover:scale-112; the panel sits at translate-y-[calc(100%-84px)] — far enough down that only its 84px header peeks — and goes to group-hover:translate-y-0. The CSS version needed .card:hover .img and .card:hover .panel; here each child states its own response.

Clipping is what makes the zoom legal. overflow-hidden on the frame keeps the scaled image inside the card's radius, so nothing spills into the grid.

The frost is one utility. bg-white/95 backdrop-blur-[6px] leaves the image faintly readable under the details — the difference between a frosted sheet and a solid overlay.

Make it yours

  • Reveal direction: swap translate-y-[calc(100%-84px)] for -translate-x-full to slide in from the left.
  • Zoom depth: group-hover:scale-105 restrained, scale-125 cinematic.
  • Peek height: the 84px in the calc is the resting strip — set it to 0px for a fully hidden sheet.

Gotchas — read before shipping

  • Keep overflow-hidden on the media frame, not only on the card, or the scaled image can paint over the badge.
  • Transform the panel; never animate bottom. The transform composites, the offset relayouts every frame.
  • group-focus-within: is not optional — without it the whole product detail is hover-only and unreachable by keyboard.
  • Under motion-reduce: the panel still opens; only the transition is dropped. Hiding it instead would remove content, not motion.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms, overflow clipping and :focus-within are universally supported; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗:focus-withintw ↗transitionstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →