22 Tailwind CSS Image Gallery
15 / 22

All 22 in 22 Tailwind CSS Image Gallery

  1. 01Tailwind Hexagon Honeycomb Image Gallery with clip-path
  2. 02Tailwind Justified Image Gallery with Aspect-Ratio Flex Rows
  3. 03Tailwind Expanding Panel Image Gallery with Flex-Grow Transitions
  4. 04Tailwind :has() Hover Spotlight Image Grid
  5. 05Tailwind Radial Orbit Image Gallery with Counter-Rotating Thumbnails
  6. 06Tailwind Interactive Pointer Trail Image Gallery
  7. 07Tailwind Masonry Image Gallery with CSS Columns (No JavaScript)
  8. 08Tailwind Metro Tile Grid Gallery with Dense Auto-Flow
  9. 09Tailwind Editorial Magazine Grid Gallery with Blend-Mode Headline
  10. 10Tailwind Pure CSS Lightbox Gallery with :target (No JavaScript)
  11. 11Tailwind Filmstrip Carousel Gallery with CSS Scroll-Snap
  12. 12Tailwind Accordion Image Gallery with Flex-Grow on Hover & Focus
  13. 13Tailwind Mosaic Grid Gallery with Contained Zoom on Hover
  14. 14Tailwind Glassmorphism Image Cards with backdrop-blur
  15. 15Tailwind Diagonal Slice Reveal Gallery with clip-path Halves
  16. 16Tailwind 3D Tilt Parallax Image Cards with Pointer-Driven Variables
  17. 17Tailwind 3D Cube Image Viewer with Radio-Driven Rotation
  18. 18Tailwind 3D Perspective Depth Stack Gallery That Fans on Focus
  19. 19Tailwind Infinite Scrolling Image Marquee with Seamless Loop
  20. 20Tailwind Ken Burns Slideshow Gallery with Staggered Cross-Fade
  21. 21Tailwind Polaroid Photo Stack Gallery with Rotate-on-Hover
  22. 22Tailwind Scattered Photo Collage with :target Spotlight
Pure TailwindMIT licensed

Tailwind Diagonal Slice Reveal Gallery with clip-path Halves

Tiles split by a sharp diagonal; on hover the two angled halves slide apart along the cut to reveal the photograph beneath. Two arbitrary clip-path values and two opposite translates — the whole effect, declared on the two elements that move.

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="tgl-15 w-full min-h-svh grid place-items-center bg-tgl15-bg font-tgl15-sans px-5 py-10" aria-label="Diagonal slice reveal gallery">
  <div class="flex flex-wrap justify-center gap-5 w-[min(880px,100%)]">
    <a href="#" class="group relative block w-[260px] aspect-square rounded-[14px] overflow-hidden no-underline bg-tgl15-well focus-visible:outline-3 focus-visible:outline-tgl15-acc focus-visible:outline-offset-[3px]">
      <img src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=500&h=500&auto=format&fit=crop" alt="Snowy mountain range" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover">
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c1),oklch(0.32_0.1_285))] [clip-path:polygon(0_0,100%_0,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(-101%,-101%)] group-focus-visible:[transform:translate(-101%,-101%)] motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c2),oklch(0.38_0.12_330))] [clip-path:polygon(100%_0,100%_100%,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(101%,101%)] group-focus-visible:[transform:translate(101%,101%)] motion-reduce:transition-none"></span>
      <span class="absolute inset-0 z-[2] grid place-items-center text-white text-xl font-extrabold tracking-[0.08em] uppercase pointer-events-none transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0 motion-reduce:transition-none">Alps</span>
    </a>
    <a href="#" class="group relative block w-[260px] aspect-square rounded-[14px] overflow-hidden no-underline bg-tgl15-well focus-visible:outline-3 focus-visible:outline-tgl15-acc focus-visible:outline-offset-[3px]">
      <img src="https://images.unsplash.com/photo-1444723121867-7a241cacace9?q=80&w=500&h=500&auto=format&fit=crop" alt="Desert dunes at midday" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover">
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c1),oklch(0.32_0.1_285))] [clip-path:polygon(0_0,100%_0,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(-101%,-101%)] group-focus-visible:[transform:translate(-101%,-101%)] motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c2),oklch(0.38_0.12_330))] [clip-path:polygon(100%_0,100%_100%,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(101%,101%)] group-focus-visible:[transform:translate(101%,101%)] motion-reduce:transition-none"></span>
      <span class="absolute inset-0 z-[2] grid place-items-center text-white text-xl font-extrabold tracking-[0.08em] uppercase pointer-events-none transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0 motion-reduce:transition-none">Sahara</span>
    </a>
    <a href="#" class="group relative block w-[260px] aspect-square rounded-[14px] overflow-hidden no-underline bg-tgl15-well focus-visible:outline-3 focus-visible:outline-tgl15-acc focus-visible:outline-offset-[3px]">
      <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=500&h=500&auto=format&fit=crop" alt="Coral reef underwater" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover">
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c1),oklch(0.32_0.1_285))] [clip-path:polygon(0_0,100%_0,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(-101%,-101%)] group-focus-visible:[transform:translate(-101%,-101%)] motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c2),oklch(0.38_0.12_330))] [clip-path:polygon(100%_0,100%_100%,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(101%,101%)] group-focus-visible:[transform:translate(101%,101%)] motion-reduce:transition-none"></span>
      <span class="absolute inset-0 z-[2] grid place-items-center text-white text-xl font-extrabold tracking-[0.08em] uppercase pointer-events-none transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0 motion-reduce:transition-none">Reef</span>
    </a>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tgl15-bg: #0e0c14;
  --color-tgl15-bg: oklch(0.14 0.015 300);
  --color-tgl15-well: #1a1622;
  --color-tgl15-well: oklch(0.21 0.02 300);
  --color-tgl15-c1: #6a4fd0;
  --color-tgl15-c1: oklch(0.5 0.17 285);
  --color-tgl15-c2: #d054b0;
  --color-tgl15-c2: oklch(0.62 0.19 330);
  --color-tgl15-acc: #b558e0;
  --color-tgl15-acc: oklch(0.65 0.19 305);
  --font-tgl15-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tgl-15 {
  width: 100%;
  min-height: 100svh;
}

.tgl-15 ::selection {
  background: var(--color-tgl15-acc);
  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-tgl15-bg: #0e0c14;
  --color-tgl15-bg: oklch(0.14 0.015 300);
  --color-tgl15-well: #1a1622;
  --color-tgl15-well: oklch(0.21 0.02 300);
  --color-tgl15-c1: #6a4fd0;
  --color-tgl15-c1: oklch(0.5 0.17 285);
  --color-tgl15-c2: #d054b0;
  --color-tgl15-c2: oklch(0.62 0.19 330);
  --color-tgl15-acc: #b558e0;
  --color-tgl15-acc: oklch(0.65 0.19 305);
  --font-tgl15-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tgl-15 {
  width: 100%;
  min-height: 100svh;
}

.tgl-15 ::selection {
  background: var(--color-tgl15-acc);
  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&display=swap">

What changed in the port

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

  • color-mix() in the original's cover gradients is replaced by a literal darker oklch stop, because the mixed value never changed and a literal is one fewer indirection to read.
  • The translate stays an arbitrary [transform:...] rather than -translate-x-full -translate-y-full, so the 101% overshoot is exact rather than approximated by the spacing scale.
  • UI change from the CSS original: the covers are now aria-hidden spans and the label carries pointer-events-none, so neither decorative layer can intercept the pointer or reach the accessibility tree.
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 Diagonal Slice Reveal Gallery with clip-path Halves
Source: https://codefronts.com/snippets/tailwind-css-image-gallery/tailwind-diagonal-slice-reveal-gallery-clip-path/

Tiles split by a sharp diagonal; on hover the two angled halves slide apart along the cut to reveal the photograph beneath. Two arbitrary clip-path values and two opposite translates — the whole effect, declared on the two elements that move.
## HTML
```html
<section class="tgl-15 w-full min-h-svh grid place-items-center bg-tgl15-bg font-tgl15-sans px-5 py-10" aria-label="Diagonal slice reveal gallery">
  <div class="flex flex-wrap justify-center gap-5 w-[min(880px,100%)]">
    <a href="#" class="group relative block w-[260px] aspect-square rounded-[14px] overflow-hidden no-underline bg-tgl15-well focus-visible:outline-3 focus-visible:outline-tgl15-acc focus-visible:outline-offset-[3px]">
      <img src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=500&h=500&auto=format&fit=crop" alt="Snowy mountain range" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover">
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c1),oklch(0.32_0.1_285))] [clip-path:polygon(0_0,100%_0,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(-101%,-101%)] group-focus-visible:[transform:translate(-101%,-101%)] motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c2),oklch(0.38_0.12_330))] [clip-path:polygon(100%_0,100%_100%,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(101%,101%)] group-focus-visible:[transform:translate(101%,101%)] motion-reduce:transition-none"></span>
      <span class="absolute inset-0 z-[2] grid place-items-center text-white text-xl font-extrabold tracking-[0.08em] uppercase pointer-events-none transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0 motion-reduce:transition-none">Alps</span>
    </a>
    <a href="#" class="group relative block w-[260px] aspect-square rounded-[14px] overflow-hidden no-underline bg-tgl15-well focus-visible:outline-3 focus-visible:outline-tgl15-acc focus-visible:outline-offset-[3px]">
      <img src="https://images.unsplash.com/photo-1444723121867-7a241cacace9?q=80&w=500&h=500&auto=format&fit=crop" alt="Desert dunes at midday" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover">
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c1),oklch(0.32_0.1_285))] [clip-path:polygon(0_0,100%_0,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(-101%,-101%)] group-focus-visible:[transform:translate(-101%,-101%)] motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c2),oklch(0.38_0.12_330))] [clip-path:polygon(100%_0,100%_100%,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(101%,101%)] group-focus-visible:[transform:translate(101%,101%)] motion-reduce:transition-none"></span>
      <span class="absolute inset-0 z-[2] grid place-items-center text-white text-xl font-extrabold tracking-[0.08em] uppercase pointer-events-none transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0 motion-reduce:transition-none">Sahara</span>
    </a>
    <a href="#" class="group relative block w-[260px] aspect-square rounded-[14px] overflow-hidden no-underline bg-tgl15-well focus-visible:outline-3 focus-visible:outline-tgl15-acc focus-visible:outline-offset-[3px]">
      <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=500&h=500&auto=format&fit=crop" alt="Coral reef underwater" loading="lazy" decoding="async" class="absolute inset-0 w-full h-full object-cover">
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c1),oklch(0.32_0.1_285))] [clip-path:polygon(0_0,100%_0,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(-101%,-101%)] group-focus-visible:[transform:translate(-101%,-101%)] motion-reduce:transition-none"></span>
      <span aria-hidden="true" class="absolute inset-0 bg-[linear-gradient(135deg,var(--color-tgl15-c2),oklch(0.38_0.12_330))] [clip-path:polygon(100%_0,100%_100%,0_100%)] transition-transform duration-500 ease-[cubic-bezier(0.5,0,0.2,1)] group-hover:[transform:translate(101%,101%)] group-focus-visible:[transform:translate(101%,101%)] motion-reduce:transition-none"></span>
      <span class="absolute inset-0 z-[2] grid place-items-center text-white text-xl font-extrabold tracking-[0.08em] uppercase pointer-events-none transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0 motion-reduce:transition-none">Reef</span>
    </a>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tgl15-bg: #0e0c14;
  --color-tgl15-bg: oklch(0.14 0.015 300);
  --color-tgl15-well: #1a1622;
  --color-tgl15-well: oklch(0.21 0.02 300);
  --color-tgl15-c1: #6a4fd0;
  --color-tgl15-c1: oklch(0.5 0.17 285);
  --color-tgl15-c2: #d054b0;
  --color-tgl15-c2: oklch(0.62 0.19 330);
  --color-tgl15-acc: #b558e0;
  --color-tgl15-acc: oklch(0.65 0.19 305);
  --font-tgl15-sans: 'Space Grotesk', system-ui, sans-serif;
}

.tgl-15 {
  width: 100%;
  min-height: 100svh;
}

.tgl-15 ::selection {
  background: var(--color-tgl15-acc);
  color: #fff;
}
```

How this works

Two triangles, one line. The covers are absolutely positioned siblings of the image, each clipped to one side of the same diagonal. Because the polygons share their cut exactly, at rest the photograph is completely hidden.

<span class="absolute inset-0 [clip-path:polygon(0_0,100%_0,0_100%)]
  transition-transform group-hover:[transform:translate(-101%,-101%)]">

Only transforms animate. The clip is static; the halves slide. That keeps the reveal on the compositor no matter how many tiles are on screen.

Focus reveals too. Each tile is an anchor and every group-hover: has a group-focus-visible: twin, so tabbing through the row opens each tile in turn.

Make it yours

  • Split angle: edit the shared diagonal in both polygons — they must stay complementary.
  • Slide distance and speed: the translate values and duration-500.
  • Colour each half independently; they are two separate gradients and nothing binds them.

Gotchas — read before shipping

  • The two polygons must describe the exact same diagonal, or a sliver of cover is left behind when they slide.
  • Keep the covers fully opaque at rest. A translucent cover means the reveal has nothing to reveal.
  • The caption sits above the covers and disappears on hover — so make sure the photograph's own contrast carries the tile once it is exposed.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

clip-path: polygon() and transforms are universal; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗:focus-visibletw ↗prefers-reduced-motiontw ↗

Arbitraryneeds bracket syntax

clip-pathtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →