33 Tailwind CSS Card Hover Effects
05 / 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 Sibling De-emphasis Pricing Grid with has-hover

Hover one pricing tier and every other tier blurs, dims and shrinks away — the whole effect is one relational selector, expressed here as has-hover:*:not-hover: on the grid. Three cards ship because the pattern only reads with siblings to react against.

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-05 w-full min-h-svh grid place-items-center bg-tch05-bg bg-[radial-gradient(circle_at_50%_0%,#1a1e29,#0a0b10_70%)] font-tch05-sans p-8">
  <div class="flex flex-wrap justify-center gap-5 *:transition *:duration-400 *:ease-[cubic-bezier(0.16,1,0.3,1)] has-hover:*:not-hover:blur-[3px] has-hover:*:not-hover:opacity-45 has-hover:*:not-hover:scale-97 has-focus-within:*:not-focus-within:blur-[3px] has-focus-within:*:not-focus-within:opacity-45 has-focus-within:*:not-focus-within:scale-97 motion-reduce:*:transition-none motion-reduce:has-hover:*:not-hover:scale-100">
    <article class="relative w-[220px] min-h-[400px] p-[1.8rem] rounded-[20px] bg-tch05-card border border-white/8 flex flex-col text-tch05-ink cursor-pointer hover:-translate-y-3 hover:scale-105 hover:z-2 hover:border-tch05-acc/50 hover:shadow-[0_30px_60px_rgb(0_0_0/0.5)] focus-within:-translate-y-3 focus-within:scale-105 focus-within:z-2 motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-100">
      <span class="text-[0.72rem] tracking-[0.18em] uppercase text-tch05-mut">Starter</span>
      <div class="font-bold text-[2.6rem] leading-none mt-2.5 mb-1">$0<span class="text-[0.9rem] font-normal text-tch05-mut">/mo</span></div>
      <ul class="list-none my-6 p-0 flex flex-col gap-2.5 text-[0.82rem] text-tch05-body *:before:content-['✓'] *:before:mr-2 *:before:font-bold *:before:text-tch05-acc">
        <li>1 project</li><li>Community support</li><li>1 GB storage</li>
      </ul>
      <a href="#" class="mt-auto flex items-center justify-center min-h-11 rounded-[10px] border border-white/15 text-center font-semibold text-[0.85rem] text-tch05-ink no-underline transition-colors duration-200 hover:bg-white/8 focus-visible:outline-2 focus-visible:outline-tch05-acc focus-visible:outline-offset-2">Get started</a>
    </article>

    <article class="relative w-[220px] min-h-[400px] p-[1.8rem] rounded-[20px] bg-tch05-card border border-tch05-acc/30 flex flex-col text-tch05-ink cursor-pointer hover:-translate-y-3 hover:scale-105 hover:z-2 hover:border-tch05-acc/50 hover:shadow-[0_30px_60px_rgb(0_0_0/0.5)] focus-within:-translate-y-3 focus-within:scale-105 focus-within:z-2 motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-100">
      <span class="text-[0.72rem] tracking-[0.18em] uppercase text-tch05-acc">Pro · Popular</span>
      <div class="font-bold text-[2.6rem] leading-none mt-2.5 mb-1">$24<span class="text-[0.9rem] font-normal text-tch05-mut">/mo</span></div>
      <ul class="list-none my-6 p-0 flex flex-col gap-2.5 text-[0.82rem] text-tch05-body *:before:content-['✓'] *:before:mr-2 *:before:font-bold *:before:text-tch05-acc">
        <li>Unlimited projects</li><li>Priority support</li><li>100 GB storage</li><li>Advanced analytics</li>
      </ul>
      <a href="#" class="mt-auto flex items-center justify-center min-h-11 rounded-[10px] bg-linear-to-r from-tch05-acc to-tch05-acc2 text-center font-semibold text-[0.85rem] text-white no-underline transition-[filter] duration-200 hover:brightness-110 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Start free trial</a>
    </article>

    <article class="relative w-[220px] min-h-[400px] p-[1.8rem] rounded-[20px] bg-tch05-card border border-white/8 flex flex-col text-tch05-ink cursor-pointer hover:-translate-y-3 hover:scale-105 hover:z-2 hover:border-tch05-acc/50 hover:shadow-[0_30px_60px_rgb(0_0_0/0.5)] focus-within:-translate-y-3 focus-within:scale-105 focus-within:z-2 motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-100">
      <span class="text-[0.72rem] tracking-[0.18em] uppercase text-tch05-mut">Team</span>
      <div class="font-bold text-[2.6rem] leading-none mt-2.5 mb-1">$60<span class="text-[0.9rem] font-normal text-tch05-mut">/mo</span></div>
      <ul class="list-none my-6 p-0 flex flex-col gap-2.5 text-[0.82rem] text-tch05-body *:before:content-['✓'] *:before:mr-2 *:before:font-bold *:before:text-tch05-acc">
        <li>Everything in Pro</li><li>SSO &amp; roles</li><li>1 TB storage</li>
      </ul>
      <a href="#" class="mt-auto flex items-center justify-center min-h-11 rounded-[10px] border border-white/15 text-center font-semibold text-[0.85rem] text-tch05-ink no-underline transition-colors duration-200 hover:bg-white/8 focus-visible:outline-2 focus-visible:outline-tch05-acc focus-visible:outline-offset-2">Contact sales</a>
    </article>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tch05-bg: #0a0b10;
  --color-tch05-bg: oklch(0.11 0.01 265);
  --color-tch05-card: #14171f;
  --color-tch05-card: oklch(0.17 0.012 265);
  --color-tch05-ink: #e6e9f0;
  --color-tch05-ink: oklch(0.92 0.008 265);
  --color-tch05-body: #aab2c4;
  --color-tch05-body: oklch(0.75 0.02 265);
  --color-tch05-mut: #8a93a8;
  --color-tch05-mut: oklch(0.64 0.02 265);
  --color-tch05-acc: #7aa0ff;
  --color-tch05-acc: oklch(0.72 0.15 265);
  --color-tch05-acc2: #7a50ff;
  --color-tch05-acc2: oklch(0.56 0.25 285);
  --font-tch05-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tch-05 {
  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-tch05-bg: #0a0b10;
  --color-tch05-bg: oklch(0.11 0.01 265);
  --color-tch05-card: #14171f;
  --color-tch05-card: oklch(0.17 0.012 265);
  --color-tch05-ink: #e6e9f0;
  --color-tch05-ink: oklch(0.92 0.008 265);
  --color-tch05-body: #aab2c4;
  --color-tch05-body: oklch(0.75 0.02 265);
  --color-tch05-mut: #8a93a8;
  --color-tch05-mut: oklch(0.64 0.02 265);
  --color-tch05-acc: #7aa0ff;
  --color-tch05-acc: oklch(0.72 0.15 265);
  --color-tch05-acc2: #7a50ff;
  --color-tch05-acc2: oklch(0.56 0.25 285);
  --font-tch05-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tch-05 {
  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=Space+Grotesk:wght@400;500;600;700&display=swap">

What changed in the port

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

  • .grid:has(.card:hover) .card:not(:hover) becomes has-hover:*:not-hover: — three stacked variants that read left to right as the sentence the selector was always trying to say.
  • Because the variants sit on the grid, adding a fourth tier inherits the behaviour with no classes at all. That is the argument for declaring relational effects on the parent rather than per-card.
  • UI change from the CSS original: a has-focus-within: twin (the original shipped hover only), real CTA links with 44px targets, and min-h instead of a fixed height so the four-item Pro tier cannot clip.
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 Sibling De-emphasis Pricing Grid with has-hover
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-sibling-de-emphasis-pricing-grid-has-hover/

Hover one pricing tier and every other tier blurs, dims and shrinks away &mdash; the whole effect is one relational selector, expressed here as has-hover:*:not-hover: on the grid. Three cards ship because the pattern only reads with siblings to react against.
## HTML
```html
<section class="tch-05 w-full min-h-svh grid place-items-center bg-tch05-bg bg-[radial-gradient(circle_at_50%_0%,#1a1e29,#0a0b10_70%)] font-tch05-sans p-8">
  <div class="flex flex-wrap justify-center gap-5 *:transition *:duration-400 *:ease-[cubic-bezier(0.16,1,0.3,1)] has-hover:*:not-hover:blur-[3px] has-hover:*:not-hover:opacity-45 has-hover:*:not-hover:scale-97 has-focus-within:*:not-focus-within:blur-[3px] has-focus-within:*:not-focus-within:opacity-45 has-focus-within:*:not-focus-within:scale-97 motion-reduce:*:transition-none motion-reduce:has-hover:*:not-hover:scale-100">
    <article class="relative w-[220px] min-h-[400px] p-[1.8rem] rounded-[20px] bg-tch05-card border border-white/8 flex flex-col text-tch05-ink cursor-pointer hover:-translate-y-3 hover:scale-105 hover:z-2 hover:border-tch05-acc/50 hover:shadow-[0_30px_60px_rgb(0_0_0/0.5)] focus-within:-translate-y-3 focus-within:scale-105 focus-within:z-2 motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-100">
      <span class="text-[0.72rem] tracking-[0.18em] uppercase text-tch05-mut">Starter</span>
      <div class="font-bold text-[2.6rem] leading-none mt-2.5 mb-1">$0<span class="text-[0.9rem] font-normal text-tch05-mut">/mo</span></div>
      <ul class="list-none my-6 p-0 flex flex-col gap-2.5 text-[0.82rem] text-tch05-body *:before:content-['✓'] *:before:mr-2 *:before:font-bold *:before:text-tch05-acc">
        <li>1 project</li><li>Community support</li><li>1 GB storage</li>
      </ul>
      <a href="#" class="mt-auto flex items-center justify-center min-h-11 rounded-[10px] border border-white/15 text-center font-semibold text-[0.85rem] text-tch05-ink no-underline transition-colors duration-200 hover:bg-white/8 focus-visible:outline-2 focus-visible:outline-tch05-acc focus-visible:outline-offset-2">Get started</a>
    </article>

    <article class="relative w-[220px] min-h-[400px] p-[1.8rem] rounded-[20px] bg-tch05-card border border-tch05-acc/30 flex flex-col text-tch05-ink cursor-pointer hover:-translate-y-3 hover:scale-105 hover:z-2 hover:border-tch05-acc/50 hover:shadow-[0_30px_60px_rgb(0_0_0/0.5)] focus-within:-translate-y-3 focus-within:scale-105 focus-within:z-2 motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-100">
      <span class="text-[0.72rem] tracking-[0.18em] uppercase text-tch05-acc">Pro · Popular</span>
      <div class="font-bold text-[2.6rem] leading-none mt-2.5 mb-1">$24<span class="text-[0.9rem] font-normal text-tch05-mut">/mo</span></div>
      <ul class="list-none my-6 p-0 flex flex-col gap-2.5 text-[0.82rem] text-tch05-body *:before:content-['✓'] *:before:mr-2 *:before:font-bold *:before:text-tch05-acc">
        <li>Unlimited projects</li><li>Priority support</li><li>100 GB storage</li><li>Advanced analytics</li>
      </ul>
      <a href="#" class="mt-auto flex items-center justify-center min-h-11 rounded-[10px] bg-linear-to-r from-tch05-acc to-tch05-acc2 text-center font-semibold text-[0.85rem] text-white no-underline transition-[filter] duration-200 hover:brightness-110 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2">Start free trial</a>
    </article>

    <article class="relative w-[220px] min-h-[400px] p-[1.8rem] rounded-[20px] bg-tch05-card border border-white/8 flex flex-col text-tch05-ink cursor-pointer hover:-translate-y-3 hover:scale-105 hover:z-2 hover:border-tch05-acc/50 hover:shadow-[0_30px_60px_rgb(0_0_0/0.5)] focus-within:-translate-y-3 focus-within:scale-105 focus-within:z-2 motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-100">
      <span class="text-[0.72rem] tracking-[0.18em] uppercase text-tch05-mut">Team</span>
      <div class="font-bold text-[2.6rem] leading-none mt-2.5 mb-1">$60<span class="text-[0.9rem] font-normal text-tch05-mut">/mo</span></div>
      <ul class="list-none my-6 p-0 flex flex-col gap-2.5 text-[0.82rem] text-tch05-body *:before:content-['✓'] *:before:mr-2 *:before:font-bold *:before:text-tch05-acc">
        <li>Everything in Pro</li><li>SSO &amp; roles</li><li>1 TB storage</li>
      </ul>
      <a href="#" class="mt-auto flex items-center justify-center min-h-11 rounded-[10px] border border-white/15 text-center font-semibold text-[0.85rem] text-tch05-ink no-underline transition-colors duration-200 hover:bg-white/8 focus-visible:outline-2 focus-visible:outline-tch05-acc focus-visible:outline-offset-2">Contact sales</a>
    </article>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tch05-bg: #0a0b10;
  --color-tch05-bg: oklch(0.11 0.01 265);
  --color-tch05-card: #14171f;
  --color-tch05-card: oklch(0.17 0.012 265);
  --color-tch05-ink: #e6e9f0;
  --color-tch05-ink: oklch(0.92 0.008 265);
  --color-tch05-body: #aab2c4;
  --color-tch05-body: oklch(0.75 0.02 265);
  --color-tch05-mut: #8a93a8;
  --color-tch05-mut: oklch(0.64 0.02 265);
  --color-tch05-acc: #7aa0ff;
  --color-tch05-acc: oklch(0.72 0.15 265);
  --color-tch05-acc2: #7a50ff;
  --color-tch05-acc2: oklch(0.56 0.25 285);
  --font-tch05-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

How this works

One selector, stated on the parent. The CSS version wrote .grid:has(.card:hover) .card:not(:hover). Tailwind composes the same thing out of three stacked variants on the grid: has-hover: (this container has something hovered), *: (apply to each direct child), not-hover: (except the hovered one). The compiled selector is nearly identical; the difference is that it now lives on the element whose children it governs.

The chosen card lifts itself. Each tier carries its own hover: lift, shadow and border tint, plus hover:z-2 so it renders above its dimmed neighbours rather than under them.

Keyboard gets the same treatment. has-focus-within:*:not-focus-within: is the focus twin of the hover rule — tabbing into a tier's CTA dims the others identically.

Make it yours

  • Intensity: blur-[3px] opacity-45 is assertive; blur-[1px] opacity-70 is a hint.
  • Add saturate-50 to the dimmed set for a greyed-out pricing feel.
  • Swap the lift for hover:-translate-y-4 with no scale if the cards hold long feature lists.

Gotchas — read before shipping

  • :has() needs Chrome 105+, Safari 15.4+, Firefox 121+. Below that the rule never matches and the grid renders plainly — an acceptable, silent fallback.
  • *: targets direct children only. If you wrap each card in a link, move the variants down a level or the selector stops matching.
  • hover:z-2 matters: without a stacking bump the lifted card can slide under an adjacent dimmed one.
  • :has() re-evaluates on every pointer move over the container; keep the grid well under ~50 children.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:has() is the real gate (Chrome 105, Safari 15.4, Firefox 121). Without it the effect is simply absent and the pricing grid still works.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗:focus-withintw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →