30 Tailwind CSS Hover Effects
19 / 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 Zoom Pan Image Hover Effect

Six cinematic image moves — centre zoom, corner pan, slow drift, zoom with a colour grade, a clip-path un-crop and zoom-with-rotation. The container clips, the inner layer scales, and every variant is one group-hover: transform.

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-19 w-full min-h-svh grid place-items-center bg-thv19-bg font-thv19-sans px-6 py-14">
  <div class="w-[min(880px,100%)] grid grid-cols-[repeat(auto-fit,minmax(230px,1fr))] gap-6">
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=900&q=80" alt="Sunlit modern living room with a pale sectional sofa" decoding="async" class="w-full h-full transition-transform duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.12] motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">center zoom</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=80" alt="Open-plan kitchen and dining room in warm daylight" decoding="async" class="w-full h-full transition-transform duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.18] group-hover:-translate-x-[5%] group-hover:-translate-y-[5%] motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">corner-pan zoom</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=900&q=80" alt="Contemporary white villa behind a manicured lawn" decoding="async" class="w-full h-full transition-transform duration-[1200ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.1] group-hover:translate-x-[3%] group-hover:translate-y-[2%] motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">slow ken-burns drift</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=900&q=80" alt="Upholstered armchair against a plaster wall" decoding="async" class="w-full h-full transition-[transform,filter] duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.1] group-hover:[filter:brightness(1.25)_saturate(1.2)] motion-reduce:transition-[filter] object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">zoom + brightness</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-visible rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=900&q=80" alt="Minimal lounge with floor-to-ceiling glazing" decoding="async" class="w-full h-full [clip-path:inset(8%_round_12px)] transition-[transform,clip-path] duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.08] group-hover:[clip-path:inset(0%_round_12px)] motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">clip-path crop zoom</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=900&q=80" alt="Suburban house exterior at golden hour" decoding="async" class="w-full h-full transition-transform duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.15] group-hover:rotate-3 motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">zoom + rotation</figcaption>
    </figure>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-thv19-bg: #08080f;
  --color-thv19-bg: oklch(0.12 0.01 285);
  --color-thv19-dim: #8b91a0;
  --color-thv19-dim: oklch(0.66 0.02 265);
  --font-thv19-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

.thv-19 ::selection {
  background: #1d4ed8;
  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-thv19-bg: #08080f;
  --color-thv19-bg: oklch(0.12 0.01 285);
  --color-thv19-dim: #8b91a0;
  --color-thv19-dim: oklch(0.66 0.02 265);
  --font-thv19-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

.thv-19 ::selection {
  background: #1d4ed8;
  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.

  • Six variants, no CSS beyond tokens: wrapper clips, inner layer transforms, and Tailwind composes the transform for you.
  • UI change from the CSS original: each tile is a <figure> with a real <figcaption> instead of a floating label span, and the caption colour was lifted to ~0.66 lightness for 4.5:1 on the near-black ground.
  • motion-reduce:transition-[filter] on the graded tile keeps the colour response and drops the zoom, rather than removing both.
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 Zoom Pan Image Hover Effect
Source: https://codefronts.com/motion/tailwind-css-hover-effects/tailwind-zoom-pan-image-hover-effect/

Six cinematic image moves — centre zoom, corner pan, slow drift, zoom with a colour grade, a clip-path un-crop and zoom-with-rotation. The container clips, the inner layer scales, and every variant is one group-hover: transform.
## HTML
```html
<section class="thv-19 w-full min-h-svh grid place-items-center bg-thv19-bg font-thv19-sans px-6 py-14">
  <div class="w-[min(880px,100%)] grid grid-cols-[repeat(auto-fit,minmax(230px,1fr))] gap-6">
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=900&q=80" alt="Sunlit modern living room with a pale sectional sofa" decoding="async" class="w-full h-full transition-transform duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.12] motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">center zoom</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=80" alt="Open-plan kitchen and dining room in warm daylight" decoding="async" class="w-full h-full transition-transform duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.18] group-hover:-translate-x-[5%] group-hover:-translate-y-[5%] motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">corner-pan zoom</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=900&q=80" alt="Contemporary white villa behind a manicured lawn" decoding="async" class="w-full h-full transition-transform duration-[1200ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.1] group-hover:translate-x-[3%] group-hover:translate-y-[2%] motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">slow ken-burns drift</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=900&q=80" alt="Upholstered armchair against a plaster wall" decoding="async" class="w-full h-full transition-[transform,filter] duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.1] group-hover:[filter:brightness(1.25)_saturate(1.2)] motion-reduce:transition-[filter] object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">zoom + brightness</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-visible rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=900&q=80" alt="Minimal lounge with floor-to-ceiling glazing" decoding="async" class="w-full h-full [clip-path:inset(8%_round_12px)] transition-[transform,clip-path] duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.08] group-hover:[clip-path:inset(0%_round_12px)] motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">clip-path crop zoom</figcaption>
    </figure>
    <figure class="group flex flex-col items-center gap-3 m-0">
      <div class="w-full aspect-[4/3] overflow-hidden rounded-xl cursor-pointer">
        <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=900&q=80" alt="Suburban house exterior at golden hour" decoding="async" class="w-full h-full transition-transform duration-600 ease-[cubic-bezier(.4,0,.2,1)] group-hover:scale-[1.15] group-hover:rotate-3 motion-reduce:transition-none object-cover">
      </div>
      <figcaption class="text-[11px] tracking-[0.12em] uppercase text-thv19-dim">zoom + rotation</figcaption>
    </figure>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-thv19-bg: #08080f;
  --color-thv19-bg: oklch(0.12 0.01 285);
  --color-thv19-dim: #8b91a0;
  --color-thv19-dim: oklch(0.66 0.02 265);
  --font-thv19-sans: 'Space Grotesk', system-ui, sans-serif;
}

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

.thv-19 ::selection {
  background: #1d4ed8;
  color: #fff;
}
```

How this works

Two elements, one job each. The wrapper owns aspect-[4/3] overflow-hidden rounded-xl; the inner layer owns the transform. Because scale does not affect layout, the frame stays put while the picture grows.

Transforms compose. Zoom plus pan is group-hover:scale-[1.18] and two translates; Tailwind merges them into a single transform, so there is no order-of-operations rewrite when you add rotation.

Stand-in artwork. The panels are layered gradients rather than photographs — deliberately, so the demo has no external dependencies, and so there are enough internal landmarks to make a 12% zoom perceptible. Swap in <img> with object-cover and nothing else changes.

Make it yours

  • Zoom range: scale-[1.12] subtle, scale-[1.3] bold; past 1.4 most subjects destabilise.
  • Add a grade with group-hover:[filter:saturate(1.3)_contrast(1.1)].
  • Slow the drift to duration-1000 for a documentary pace.

Gotchas — read before shipping

  • overflow-hidden also clips shadows on the image — put shadows on the wrapper.
  • The crop variant needs overflow-visible because the clip, not the container, defines its edge.
  • Large scales expose source resolution; serve artwork at roughly 2× the display size.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms, filters and clip-path are Baseline; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transformstw ↗filtertw ↗aspect-ratiotw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →