22 Tailwind CSS Image Gallery
09 / 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 Editorial Magazine Grid Gallery with Blend-Mode Headline

A premium editorial spread: a tall hero with the headline set directly over it in mix-blend-mode: difference, flanked by an asymmetric grid of supporting shots. The port keeps the print-inspired type treatment and adds the scrim the blend mode needs to be safe.

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-09 w-full min-h-svh grid place-items-center bg-tgl09-bg font-tgl09-sans px-5 py-11" aria-label="Magazine layout gallery">
  <div class="w-[min(940px,100%)] grid grid-cols-2 gap-3.5 max-[640px]:grid-cols-1">
    <figure class="relative m-0 rounded-md overflow-hidden [grid-area:1/1/3/2] max-[640px]:[grid-area:auto]">
      <img src="https://images.unsplash.com/photo-1481277542470-605612bd2d61?q=80&w=900&h=700&auto=format&fit=crop" alt="Winding coastal road at sunset" loading="lazy" decoding="async" class="block w-full h-full object-cover [aspect-ratio:9/11]">
      <span aria-hidden="true" class="absolute inset-x-0 bottom-0 h-1/3 bg-[linear-gradient(0deg,rgba(0,0,0,0.45),transparent)]"></span>
      <figcaption class="absolute inset-x-0 bottom-0 p-6 mix-blend-difference text-white">
        <span class="block font-tgl09-mono text-xs tracking-[0.2em] uppercase opacity-90">Issue 24 &middot; Travel</span>
        <h3 class="mt-2 font-tgl09-serif text-[40px] leading-[1.02] font-bold tracking-[-0.01em] text-balance max-[640px]:text-[32px]">The Long Way North</h3>
      </figcaption>
    </figure>
    <figure class="group relative m-0 rounded-md overflow-hidden bg-tgl09-well">
      <img src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?q=80&w=500&h=500&auto=format&fit=crop" alt="Fishing harbour at first light" loading="lazy" decoding="async" class="block w-full h-full object-cover aspect-square transition-transform duration-500 ease-[cubic-bezier(0.2,0.7,0.2,1)] group-hover:scale-105 motion-reduce:transition-none">
      <figcaption class="absolute inset-x-0 bottom-0 px-3.5 py-2.5 w-full text-white font-tgl09-serif italic text-[15px] bg-[linear-gradient(0deg,rgba(0,0,0,0.65),transparent)]">Harbour mornings</figcaption>
    </figure>
    <figure class="group relative m-0 rounded-md overflow-hidden bg-tgl09-well">
      <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=500&h=500&auto=format&fit=crop" alt="Timber cabin among pines" loading="lazy" decoding="async" class="block w-full h-full object-cover aspect-square transition-transform duration-500 ease-[cubic-bezier(0.2,0.7,0.2,1)] group-hover:scale-105 motion-reduce:transition-none">
      <figcaption class="absolute inset-x-0 bottom-0 px-3.5 py-2.5 w-full text-white font-tgl09-serif italic text-[15px] bg-[linear-gradient(0deg,rgba(0,0,0,0.65),transparent)]">Off the map</figcaption>
    </figure>
    <figure class="group relative m-0 col-span-2 rounded-md overflow-hidden bg-tgl09-well max-[640px]:col-span-1">
      <img src="https://images.unsplash.com/photo-1611432579699-484f7990b127?q=80&w=900&h=450&auto=format&fit=crop" alt="Empty mountain highway" loading="lazy" decoding="async" class="block w-full h-full object-cover [aspect-ratio:2/1] transition-transform duration-500 ease-[cubic-bezier(0.2,0.7,0.2,1)] group-hover:scale-105 motion-reduce:transition-none">
      <figcaption class="absolute inset-x-0 bottom-0 px-3.5 py-2.5 w-full text-white font-tgl09-serif italic text-[15px] bg-[linear-gradient(0deg,rgba(0,0,0,0.65),transparent)]">Nothing but road ahead</figcaption>
    </figure>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tgl09-bg: #f7f5f0;
  --color-tgl09-bg: oklch(0.97 0.008 85);
  --color-tgl09-well: #e7e3da;
  --color-tgl09-well: oklch(0.91 0.012 85);
  --color-tgl09-acc: #1a1a1a;
  --color-tgl09-acc: oklch(0.2 0 0);
  --font-tgl09-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tgl09-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-tgl09-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

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

.tgl-09 ::selection {
  background: var(--color-tgl09-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-tgl09-bg: #f7f5f0;
  --color-tgl09-bg: oklch(0.97 0.008 85);
  --color-tgl09-well: #e7e3da;
  --color-tgl09-well: oklch(0.91 0.012 85);
  --color-tgl09-acc: #1a1a1a;
  --color-tgl09-acc: oklch(0.2 0 0);
  --font-tgl09-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tgl09-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-tgl09-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

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

.tgl-09 ::selection {
  background: var(--color-tgl09-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&family=Playfair+Display:wght@700;900&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • Three font roles as three @theme entries mint font-tgl09-sans, -serif and -mono. In the CSS version the serif was repeated as a literal stack in four rules.
  • [grid-area:1/1/3/2] beats row-span-2 here because the spread is a designed composition, not a flow: the hero must be in that cell, not wherever auto-placement puts it.
  • UI change from the CSS original: a scrim was added beneath the blend-mode headline, and the display face is now Playfair Display rather than Georgia — the original's blend-only approach dropped below 4.5:1 wherever the photograph went mid-grey.
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 Editorial Magazine Grid Gallery with Blend-Mode Headline
Source: https://codefronts.com/snippets/tailwind-css-image-gallery/tailwind-editorial-magazine-grid-gallery-blend-mode/

A premium editorial spread: a tall hero with the headline set directly over it in mix-blend-mode: difference, flanked by an asymmetric grid of supporting shots. The port keeps the print-inspired type treatment and adds the scrim the blend mode needs to be safe.
## HTML
```html
<section class="tgl-09 w-full min-h-svh grid place-items-center bg-tgl09-bg font-tgl09-sans px-5 py-11" aria-label="Magazine layout gallery">
  <div class="w-[min(940px,100%)] grid grid-cols-2 gap-3.5 max-[640px]:grid-cols-1">
    <figure class="relative m-0 rounded-md overflow-hidden [grid-area:1/1/3/2] max-[640px]:[grid-area:auto]">
      <img src="https://images.unsplash.com/photo-1481277542470-605612bd2d61?q=80&w=900&h=700&auto=format&fit=crop" alt="Winding coastal road at sunset" loading="lazy" decoding="async" class="block w-full h-full object-cover [aspect-ratio:9/11]">
      <span aria-hidden="true" class="absolute inset-x-0 bottom-0 h-1/3 bg-[linear-gradient(0deg,rgba(0,0,0,0.45),transparent)]"></span>
      <figcaption class="absolute inset-x-0 bottom-0 p-6 mix-blend-difference text-white">
        <span class="block font-tgl09-mono text-xs tracking-[0.2em] uppercase opacity-90">Issue 24 &middot; Travel</span>
        <h3 class="mt-2 font-tgl09-serif text-[40px] leading-[1.02] font-bold tracking-[-0.01em] text-balance max-[640px]:text-[32px]">The Long Way North</h3>
      </figcaption>
    </figure>
    <figure class="group relative m-0 rounded-md overflow-hidden bg-tgl09-well">
      <img src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?q=80&w=500&h=500&auto=format&fit=crop" alt="Fishing harbour at first light" loading="lazy" decoding="async" class="block w-full h-full object-cover aspect-square transition-transform duration-500 ease-[cubic-bezier(0.2,0.7,0.2,1)] group-hover:scale-105 motion-reduce:transition-none">
      <figcaption class="absolute inset-x-0 bottom-0 px-3.5 py-2.5 w-full text-white font-tgl09-serif italic text-[15px] bg-[linear-gradient(0deg,rgba(0,0,0,0.65),transparent)]">Harbour mornings</figcaption>
    </figure>
    <figure class="group relative m-0 rounded-md overflow-hidden bg-tgl09-well">
      <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=500&h=500&auto=format&fit=crop" alt="Timber cabin among pines" loading="lazy" decoding="async" class="block w-full h-full object-cover aspect-square transition-transform duration-500 ease-[cubic-bezier(0.2,0.7,0.2,1)] group-hover:scale-105 motion-reduce:transition-none">
      <figcaption class="absolute inset-x-0 bottom-0 px-3.5 py-2.5 w-full text-white font-tgl09-serif italic text-[15px] bg-[linear-gradient(0deg,rgba(0,0,0,0.65),transparent)]">Off the map</figcaption>
    </figure>
    <figure class="group relative m-0 col-span-2 rounded-md overflow-hidden bg-tgl09-well max-[640px]:col-span-1">
      <img src="https://images.unsplash.com/photo-1611432579699-484f7990b127?q=80&w=900&h=450&auto=format&fit=crop" alt="Empty mountain highway" loading="lazy" decoding="async" class="block w-full h-full object-cover [aspect-ratio:2/1] transition-transform duration-500 ease-[cubic-bezier(0.2,0.7,0.2,1)] group-hover:scale-105 motion-reduce:transition-none">
      <figcaption class="absolute inset-x-0 bottom-0 px-3.5 py-2.5 w-full text-white font-tgl09-serif italic text-[15px] bg-[linear-gradient(0deg,rgba(0,0,0,0.65),transparent)]">Nothing but road ahead</figcaption>
    </figure>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tgl09-bg: #f7f5f0;
  --color-tgl09-bg: oklch(0.97 0.008 85);
  --color-tgl09-well: #e7e3da;
  --color-tgl09-well: oklch(0.91 0.012 85);
  --color-tgl09-acc: #1a1a1a;
  --color-tgl09-acc: oklch(0.2 0 0);
  --font-tgl09-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-tgl09-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-tgl09-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

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

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

How this works

The headline inverts against the photograph. mix-blend-difference subtracts the backdrop from the type, so white text stays legible over light and dark areas alike — the trick print-inspired layouts have used for decades, and a real utility in Tailwind.

Placement is explicit. The hero claims rows 1–2 of column 1 via [grid-area:1/1/3/2]; the supporting cells flow into what is left, and the wide cell spans both columns at the foot of the spread.

Blend is not a contrast strategy on its own. A soft scrim sits under the overlay so the kicker and title hold 4.5:1 even where the photograph goes mid-grey — the one place a blend mode reliably fails.

Make it yours

  • Rebalance the spread by editing the hero's [grid-area:...]; everything else reflows around it.
  • Try mix-blend-exclusion or mix-blend-overlay for a softer inversion.
  • Swap --font-tgl09-serif for your editorial face — it is one token, used twice.

Gotchas — read before shipping

  • Blend-mode legibility depends on the actual photograph. Test with the real image, never a placeholder, and keep the scrim.
  • mix-blend-* creates a stacking context; anything that must sit above the overlay needs its own z-*.
  • Give the hero a fixed [aspect-ratio:9/11] so the overlaid headline lands in a predictable place at every width.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Grid and mix-blend-mode are universal; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗mix-blend-modetw ↗aspect-ratiotw ↗transitionstw ↗prefers-reduced-motiontw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →