30 Tailwind CSS Hover Effects
17 / 30

All 30 in 30 Tailwind CSS Hover Effects

  1. 01Tailwind Underline Draw Hover Effect
  2. 02Tailwind Text Glitch Hover Effect
  3. 03Tailwind Letter Spacing Expand Hover Effect
  4. 04Tailwind Gradient Text Reveal Hover Effect
  5. 05Tailwind Split Text Hover Effect
  6. 06Tailwind Neon Glow Text Hover Effect
  7. 07Tailwind Magnetic Liquid Button Hover Effect
  8. 08Tailwind Border Draw Hover Effect
  9. 09Tailwind Shimmer Shine Button Hover Effect
  10. 10Tailwind Fill Wipe Button Hover Effect
  11. 11Tailwind 3D Press Button Hover Effect
  12. 12Tailwind Ripple Button Hover Effect
  13. 13Tailwind 3D Tilt Card Hover Effect
  14. 14Tailwind Card Flip Hover Effect
  15. 15Tailwind Glassmorphism Card Hover Effect
  16. 16Tailwind Spotlight Card Hover Effect
  17. 17Tailwind Slide Reveal Card Hover Effect
  18. 18Tailwind Stack Lift Card Hover Effect
  19. 19Tailwind Zoom Pan Image Hover Effect
  20. 20Tailwind Color Channel Split Hover Effect
  21. 21Tailwind Duotone Image Hover Effect
  22. 22Tailwind Curtain Reveal Image Hover Effect
  23. 23Tailwind Ken Burns Image Hover Effect
  24. 24Tailwind Image Tilt Depth Hover Effect
  25. 25Tailwind Underline Slide Nav Hover Effect
  26. 26Tailwind Highlight Fill Nav Hover Effect
  27. 27Tailwind Strikethrough Hover Link Effect
  28. 28Tailwind Inline Word Swap Hover Effect
  29. 29Tailwind Dot Trail Cursor Hover Effect
  30. 30Tailwind Magnetic Cursor Pull Hover Effect
Pure TailwindMIT licensed

Tailwind Slide Reveal Card Hover Effect

Four cards that hide content until hover — bottom-up overlay, left-push, curtain wipe and a blurred dissolve. Every reveal is a group-hover: transform on a panel clipped by the card's overflow-hidden.

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="thv-17 w-full min-h-svh grid place-items-center bg-thv17-bg font-thv17-sans px-6 py-14">
  <div class="w-[min(760px,100%)] grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-8">
    <div class="group relative overflow-hidden min-h-[220px] rounded-2xl bg-white/[0.03] border border-white/[0.08]">
      <div class="flex flex-col gap-2.5 p-7">
        <span class="text-2xl text-thv17-amber">♟</span>
        <span class="text-base font-bold text-thv17-text">Strategy Kit</span>
        <span class="text-[0.82rem] leading-relaxed text-thv17-dim">A modern approach to product design.</span>
      </div>
      <div class="absolute inset-0 flex flex-col gap-2.5 p-7 bg-thv17-amber translate-y-full transition-transform duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:transition-none">
        <span class="text-base font-bold text-black">Revealed!</span>
        <span class="text-[0.82rem] leading-relaxed text-black/70">A bottom-up slide reveals the hidden details.</span>
        <a href="#" class="mt-1 inline-flex items-center min-h-11 text-[0.85rem] font-semibold text-black no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black">Explore →</a>
      </div>
    </div>
    <div class="group relative overflow-hidden min-h-[220px] rounded-2xl bg-white/[0.03] border border-white/[0.08]">
      <div class="absolute inset-0 flex w-[200%] transition-transform duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:-translate-x-1/2 group-focus-within:-translate-x-1/2 motion-reduce:transition-none">
        <div class="basis-1/2 shrink-0 flex flex-col gap-2.5 p-7">
          <span class="text-2xl text-thv17-amber">⬡</span>
          <span class="text-base font-bold text-thv17-text">Design System</span>
          <span class="text-[0.82rem] leading-relaxed text-thv17-dim">Components that scale.</span>
        </div>
        <div class="basis-1/2 shrink-0 flex flex-col gap-2.5 p-7 bg-thv17-orange">
          <span class="text-base font-bold text-white">Left Push</span>
          <span class="text-[0.82rem] leading-relaxed text-white/85">Content slides out, the reveal slides in.</span>
          <a href="#" class="mt-1 inline-flex items-center min-h-11 text-[0.85rem] font-semibold text-white no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Open →</a>
        </div>
      </div>
    </div>
    <div class="group relative overflow-hidden min-h-[220px] rounded-2xl bg-white/[0.03] border border-white/[0.08]">
      <div class="flex flex-col gap-2.5 p-7">
        <span class="text-2xl text-thv17-amber">◈</span>
        <span class="text-base font-bold text-thv17-text">Brand Guide</span>
        <span class="text-[0.82rem] leading-relaxed text-thv17-dim">Visual language at scale.</span>
      </div>
      <div class="absolute inset-0 z-10 bg-thv17-warm origin-left scale-x-0 transition-transform duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-x-100 group-focus-within:scale-x-100 motion-reduce:transition-none"></div>
      <div class="absolute inset-0 z-20 flex flex-col gap-2.5 p-7 bg-thv17-warm opacity-0 transition-opacity duration-200 delay-300 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none">
        <span class="text-base font-bold text-black">Curtain!</span>
        <span class="text-[0.82rem] leading-relaxed text-black/70">A wipe reveals the content beneath.</span>
        <a href="#" class="mt-1 inline-flex items-center min-h-11 text-[0.85rem] font-semibold text-black no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black">View →</a>
      </div>
    </div>
    <div class="group relative overflow-hidden min-h-[220px] rounded-2xl bg-white/[0.03] border border-white/[0.08]">
      <div class="flex flex-col gap-2.5 p-7">
        <span class="text-2xl text-thv17-amber">✦</span>
        <span class="text-base font-bold text-thv17-text">Case Study</span>
        <span class="text-[0.82rem] leading-relaxed text-thv17-dim">Process and outcomes, detailed.</span>
      </div>
      <div class="absolute inset-0 flex flex-col gap-2.5 p-7 bg-thv17-bg/95 backdrop-blur-[4px] opacity-0 translate-y-2 transition-[opacity,transform] duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-opacity">
        <span class="text-base font-bold text-thv17-text">Dissolve</span>
        <span class="text-[0.82rem] leading-relaxed text-thv17-dim">Opacity fade with a translateY settle.</span>
        <a href="#" class="mt-1 inline-flex items-center min-h-11 text-[0.85rem] font-semibold text-thv17-amber no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-thv17-amber">Read →</a>
      </div>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-thv17-bg: #0c0700;
  --color-thv17-bg: oklch(0.12 0.02 70);
  --color-thv17-text: #fef3c7;
  --color-thv17-text: oklch(0.95 0.06 95);
  --color-thv17-dim: #a8a29e;
  --color-thv17-dim: oklch(0.72 0.01 60);
  --color-thv17-amber: #f59e0b;
  --color-thv17-amber: oklch(0.77 0.16 70);
  --color-thv17-orange: #f97316;
  --color-thv17-orange: oklch(0.7 0.19 45);
  --color-thv17-warm: #fbbf24;
  --color-thv17-warm: oklch(0.82 0.16 82);
  --font-thv17-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-17 {
  width: 100%;
  min-height: 100svh;
}

.thv-17 ::selection {
  background: var(--color-thv17-orange);
  color: #fff;
}

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-thv17-bg: #0c0700;
  --color-thv17-bg: oklch(0.12 0.02 70);
  --color-thv17-text: #fef3c7;
  --color-thv17-text: oklch(0.95 0.06 95);
  --color-thv17-dim: #a8a29e;
  --color-thv17-dim: oklch(0.72 0.01 60);
  --color-thv17-amber: #f59e0b;
  --color-thv17-amber: oklch(0.77 0.16 70);
  --color-thv17-orange: #f97316;
  --color-thv17-orange: oklch(0.7 0.19 45);
  --color-thv17-warm: #fbbf24;
  --color-thv17-warm: oklch(0.82 0.16 82);
  --font-thv17-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-17 {
  width: 100%;
  min-height: 100svh;
}

.thv-17 ::selection {
  background: var(--color-thv17-orange);
  color: #fff;
}
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&family=JetBrains+Mono:wght@400;500;600;800&display=swap">

What changed in the port

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

  • group-hover: plus group-focus-within: is the pairing this whole pattern depends on: the overlay holds a link, and a link you can only reach with a mouse is not a link.
  • UI change from the CSS original: each CTA is a real anchor with a 44px target and its own focus ring, and the muted body copy was lifted to ~0.72 lightness for 4.5:1 on the dark face.
  • The push variant became a single 200%-wide flex track, which removes the two-panel sync problem the CSS version solved with duplicate transitions.
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 Slide Reveal Card Hover Effect
Source: https://codefronts.com/motion/tailwind-css-hover-effects/tailwind-slide-reveal-card-hover-effect/

Four cards that hide content until hover — bottom-up overlay, left-push, curtain wipe and a blurred dissolve. Every reveal is a group-hover: transform on a panel clipped by the card's overflow-hidden.
## HTML
```html
<section class="thv-17 w-full min-h-svh grid place-items-center bg-thv17-bg font-thv17-sans px-6 py-14">
  <div class="w-[min(760px,100%)] grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-8">
    <div class="group relative overflow-hidden min-h-[220px] rounded-2xl bg-white/[0.03] border border-white/[0.08]">
      <div class="flex flex-col gap-2.5 p-7">
        <span class="text-2xl text-thv17-amber">♟</span>
        <span class="text-base font-bold text-thv17-text">Strategy Kit</span>
        <span class="text-[0.82rem] leading-relaxed text-thv17-dim">A modern approach to product design.</span>
      </div>
      <div class="absolute inset-0 flex flex-col gap-2.5 p-7 bg-thv17-amber translate-y-full transition-transform duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:transition-none">
        <span class="text-base font-bold text-black">Revealed!</span>
        <span class="text-[0.82rem] leading-relaxed text-black/70">A bottom-up slide reveals the hidden details.</span>
        <a href="#" class="mt-1 inline-flex items-center min-h-11 text-[0.85rem] font-semibold text-black no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black">Explore →</a>
      </div>
    </div>
    <div class="group relative overflow-hidden min-h-[220px] rounded-2xl bg-white/[0.03] border border-white/[0.08]">
      <div class="absolute inset-0 flex w-[200%] transition-transform duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:-translate-x-1/2 group-focus-within:-translate-x-1/2 motion-reduce:transition-none">
        <div class="basis-1/2 shrink-0 flex flex-col gap-2.5 p-7">
          <span class="text-2xl text-thv17-amber">⬡</span>
          <span class="text-base font-bold text-thv17-text">Design System</span>
          <span class="text-[0.82rem] leading-relaxed text-thv17-dim">Components that scale.</span>
        </div>
        <div class="basis-1/2 shrink-0 flex flex-col gap-2.5 p-7 bg-thv17-orange">
          <span class="text-base font-bold text-white">Left Push</span>
          <span class="text-[0.82rem] leading-relaxed text-white/85">Content slides out, the reveal slides in.</span>
          <a href="#" class="mt-1 inline-flex items-center min-h-11 text-[0.85rem] font-semibold text-white no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Open →</a>
        </div>
      </div>
    </div>
    <div class="group relative overflow-hidden min-h-[220px] rounded-2xl bg-white/[0.03] border border-white/[0.08]">
      <div class="flex flex-col gap-2.5 p-7">
        <span class="text-2xl text-thv17-amber">◈</span>
        <span class="text-base font-bold text-thv17-text">Brand Guide</span>
        <span class="text-[0.82rem] leading-relaxed text-thv17-dim">Visual language at scale.</span>
      </div>
      <div class="absolute inset-0 z-10 bg-thv17-warm origin-left scale-x-0 transition-transform duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-x-100 group-focus-within:scale-x-100 motion-reduce:transition-none"></div>
      <div class="absolute inset-0 z-20 flex flex-col gap-2.5 p-7 bg-thv17-warm opacity-0 transition-opacity duration-200 delay-300 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none">
        <span class="text-base font-bold text-black">Curtain!</span>
        <span class="text-[0.82rem] leading-relaxed text-black/70">A wipe reveals the content beneath.</span>
        <a href="#" class="mt-1 inline-flex items-center min-h-11 text-[0.85rem] font-semibold text-black no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black">View →</a>
      </div>
    </div>
    <div class="group relative overflow-hidden min-h-[220px] rounded-2xl bg-white/[0.03] border border-white/[0.08]">
      <div class="flex flex-col gap-2.5 p-7">
        <span class="text-2xl text-thv17-amber">✦</span>
        <span class="text-base font-bold text-thv17-text">Case Study</span>
        <span class="text-[0.82rem] leading-relaxed text-thv17-dim">Process and outcomes, detailed.</span>
      </div>
      <div class="absolute inset-0 flex flex-col gap-2.5 p-7 bg-thv17-bg/95 backdrop-blur-[4px] opacity-0 translate-y-2 transition-[opacity,transform] duration-400 ease-[cubic-bezier(.4,0,.2,1)] group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:translate-y-0 motion-reduce:transition-opacity">
        <span class="text-base font-bold text-thv17-text">Dissolve</span>
        <span class="text-[0.82rem] leading-relaxed text-thv17-dim">Opacity fade with a translateY settle.</span>
        <a href="#" class="mt-1 inline-flex items-center min-h-11 text-[0.85rem] font-semibold text-thv17-amber no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-thv17-amber">Read →</a>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-thv17-bg: #0c0700;
  --color-thv17-bg: oklch(0.12 0.02 70);
  --color-thv17-text: #fef3c7;
  --color-thv17-text: oklch(0.95 0.06 95);
  --color-thv17-dim: #a8a29e;
  --color-thv17-dim: oklch(0.72 0.01 60);
  --color-thv17-amber: #f59e0b;
  --color-thv17-amber: oklch(0.77 0.16 70);
  --color-thv17-orange: #f97316;
  --color-thv17-orange: oklch(0.7 0.19 45);
  --color-thv17-warm: #fbbf24;
  --color-thv17-warm: oklch(0.82 0.16 82);
  --font-thv17-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-17 {
  width: 100%;
  min-height: 100svh;
}

.thv-17 ::selection {
  background: var(--color-thv17-orange);
  color: #fff;
}
```

How this works

The trigger lives on the card, the motion on the panel. group on the card; group-hover:translate-y-0 on the overlay. Because the panel starts at translate-y-full and the card clips, nothing is visible until the hover.

The push is one track, not two panels. A flex row of two 100%-wide faces slides by -translate-x-1/2, which keeps the outgoing and incoming halves perfectly in step.

Dissolve combines opacity, translate and blur. opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 over a backdrop-blur-[4px] scrim.

Make it yours

  • Change direction by swapping translate-y-full for translate-x-full.
  • Stagger the overlay's children with delay-100 / delay-150 so the copy settles after the panel.
  • Put a real CTA inside the overlay — this pattern earns its keep when the hidden content is actionable.

Gotchas — read before shipping

  • Interactive elements inside a hidden overlay need pointer-events-none at rest, or they collect phantom clicks.
  • :hover sticks after a tap on touch devices; group-focus-within: is what makes the pattern usable on keyboard and predictable on touch.
  • The card must keep overflow-hidden, or the resting panel is visible below it.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms and overflow only; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transformstw ↗transitionstw ↗backdrop-filtertw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →