~/css/tailwind-image-hover-effects

6 Tailwind Image Hover Effects

6 TailwindPublished 2026-10-05Free · no sign-up

Six ways to animate pictures on hover with Tailwind: zoom inside a frame, black and white to colour, a slide-up project overlay, a tilting album cover with a coloured shadow, a product photo that swaps to the back view and a panorama that pans.

Filter demos

01. Tailwind Zoom Image with Caption

TailwindImageZoom

A framed picture that zooms gently on hover while a caption bar stays put along the bottom. The figure clips the zoom with overflow-hidden and the caption sits on a dark translucent strip for contrast.

View code

<figure class="group relative w-64 max-w-full overflow-hidden rounded-2xl shadow-lg">
  <div role="img" aria-label="Sunset over a harbour" class="aspect-[4/3] bg-[linear-gradient(#fdba74,#f472b6_45%,#1e3a8a_46%,#0f172a)] transition-transform duration-500 group-hover:scale-110 motion-reduce:transition-none"></div>
  <figcaption class="absolute inset-x-0 bottom-0 bg-black/60 px-3 py-2 text-sm font-semibold text-white">Harbour at dusk</figcaption>
</figure>

02. Tailwind Grayscale to Colour

TailwindImageFilter

A row of pictures shown in black and white that bloom into colour on hover, a tidy look for client logos or team photos. grayscale and hover:grayscale-0 are filter utilities, so the transition is smooth.

View code

<ul class="grid w-full max-w-xs grid-cols-3 gap-2">
  <li><div role="img" aria-label="Lemon tree" class="aspect-square rounded-xl ring-1 ring-slate-300 bg-[radial-gradient(circle_at_40%_40%,#fde047_18%,#16a34a_19%,#14532d)] grayscale transition duration-300 hover:grayscale-0"></div></li>
  <li><div role="img" aria-label="Blue door" class="aspect-square rounded-xl ring-1 ring-slate-300 bg-[linear-gradient(90deg,#fb923c_25%,#1d4ed8_25%_75%,#fb923c_75%)] grayscale transition duration-300 hover:grayscale-0"></div></li>
  <li><div role="img" aria-label="Red bicycle" class="aspect-square rounded-xl ring-1 ring-slate-300 [background:radial-gradient(circle_at_30%_70%,transparent_14%,#dc2626_15%_20%,transparent_21%),radial-gradient(circle_at_70%_70%,transparent_14%,#dc2626_15%_20%,transparent_21%),#fde68a] grayscale transition duration-300 hover:grayscale-0"></div></li>
</ul>

03. Tailwind Slide-Up Image Overlay

TailwindImageOverlay

A portfolio tile where a dark panel with the project name and a link slides up over the picture on hover or focus. On touch screens the panel is shown from the start, so the link is never hidden.

View code

<article class="group relative w-64 max-w-full overflow-hidden rounded-2xl">
  <div role="img" aria-label="Abstract shapes poster" class="aspect-square [background:radial-gradient(circle_at_30%_30%,#f472b6_0_22%,transparent_23%),radial-gradient(circle_at_70%_65%,#38bdf8_0_28%,transparent_29%),#1e1b4b]"></div>
  <div class="absolute inset-x-0 bottom-0 translate-y-full bg-slate-950/85 p-4 text-white transition-transform duration-300 group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:transition-none [@media(hover:none)]:translate-y-0">
    <h3 class="font-bold">Festival poster series</h3>
    <a href="#poster" class="mt-1 inline-block text-sm font-semibold text-pink-300 underline-offset-4 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-pink-300">View project →</a>
  </div>
</article>

04. Tailwind Tilting Image with Coloured Shadow

TailwindImageShadow

An album cover that turns a few degrees and casts a coloured shadow on hover. Coloured shadows come from shadow-violet-500/40 style utilities, which tint the shadow to match the picture.

View code

<figure class="w-52 max-w-full">
  <div role="img" aria-label="Album cover with violet waves" class="aspect-square rounded-xl ring-1 ring-slate-300 bg-[repeating-radial-gradient(circle_at_50%_120%,#7c3aed_0_12px,#a78bfa_12px_24px)] shadow-md transition duration-300 hover:shadow-2xl hover:shadow-violet-500/40 motion-safe:hover:-rotate-3 motion-safe:hover:scale-105"></div>
  <figcaption class="mt-3 text-sm"><b class="block text-slate-900">Night Drive</b><span class="text-slate-600">Neon Harbour</span></figcaption>
</figure>

05. Tailwind Front and Back Image Swap

TailwindImageProduct

A product photo that cross-fades to a second view on hover, as shops do to show the back of a garment. The second picture is stacked on top with opacity-0 and fades in with group-hover:opacity-100.

View code

<a href="#hoodie" class="group block w-52 max-w-full focus-visible:outline-none">
  <div class="relative aspect-[3/4] overflow-hidden rounded-xl ring-1 ring-slate-200 group-focus-visible:ring-4 group-focus-visible:ring-indigo-500">
    <div role="img" aria-label="Green hoodie, front" class="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_25%,#f1f5f9_0_9%,transparent_10%),linear-gradient(#15803d,#166534)]"></div>
    <div role="img" aria-label="Green hoodie, back with print" class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,#fde047_0_16%,transparent_17%),linear-gradient(#15803d,#166534)] opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus-visible:opacity-100"></div>
  </div>
  <p class="mt-2 text-sm font-semibold text-slate-900">Forest hoodie <span class="font-normal text-slate-600">· $64</span></p>
</a>

06. Tailwind Panning Panorama

TailwindImagePan

A wide panorama in a narrow frame slowly pans from left to right while hovered. The background is twice the frame's width, and a long transition on background-position does the camera move.

View code

<figure class="w-64 max-w-full">
  <div role="img" aria-label="Panorama of hills under a setting sun" class="h-36 rounded-2xl bg-[radial-gradient(circle_at_80%_45%,#fde68a_0_6%,transparent_7%),radial-gradient(ellipse_at_20%_100%,#065f46_0_40%,transparent_41%),radial-gradient(ellipse_at_65%_110%,#047857_0_45%,transparent_46%),linear-gradient(#fb923c,#be185d)] bg-[length:200%_100%] bg-left transition-[background-position] duration-[3000ms] ease-in-out hover:bg-right motion-reduce:transition-none"></div>
  <figcaption class="mt-2 text-sm text-slate-300">Hover to pan across</figcaption>
</figure>

About these Tailwind Image Hover Effects

Filters are utilities

grayscale, blur-sm, brightness-75 and their hover: versions transition smoothly with transition.

Coloured shadows

shadow-2xl shadow-violet-500/40 tints the shadow, which looks natural under colourful images.

Swap with opacity

Stack the second image on top with absolute inset-0 opacity-0 and fade it in with group-hover:opacity-100. Describe both views in their alt text.

Alt text still matters

These demos use gradient placeholders with role="img" and a label; with real photos, use img elements with meaningful alt text.

Frequently asked questions

Will these work with real photos?

Yes. Replace each placeholder div with an img and keep the same classes, adding object-cover where needed.

Do they work on phones?

The overlay demo shows its panel permanently on touch screens; the others are decoration and lose nothing.

Is there a CSS version?

Yes, see the CSS image hover effects collection.