gallery masonry blog hover-overlay metadata columns grid masonry gallery blog columns hover-overlay metadata mixed-heights masonry blog gallery with hover overlay image grid with blog metadata on hover
Gallery Masonry Blog
Fetch pattern JSON:
curl https://webspire.de/patterns/gallery/masonry-blog.json masonry-blog.html
<section class="ws-gallery bg-[var(--ws-gallery-bg)]">
<div class="mx-auto max-w-7xl px-6 py-16">
<!-- Section header -->
<div class="mb-10">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)]">From the blog</h2>
<p class="mt-2 text-base text-[var(--ws-gallery-text-soft)]">Design insights, pattern breakdowns, and frontend deep dives.</p>
</div>
<!-- Masonry grid -->
<div class="columns-2 gap-4 lg:columns-3">
<!-- Item 1 — tall (aspect-[2/3]) -->
<div class="group relative mb-4 break-inside-avoid overflow-hidden rounded-2xl" style="aspect-ratio: 2/3;">
<div class="h-full w-full" style="background: linear-gradient(160deg, #6366f1, #a78bfa);"><!-- ws-ok --></div>
<div class="absolute inset-0 flex flex-col justify-end bg-black/0 transition-all duration-300 group-hover:bg-black/50">
<div class="translate-y-4 p-4 text-white opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<p class="text-xs">Mar 12, 2026 · <span>14 comments</span> · <span>5 min read</span></p>
<p class="mt-1 text-sm font-semibold leading-snug">Design tokens explained</p>
</div>
</div>
<a href="#" class="absolute bottom-3 right-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/20 opacity-0 transition-all duration-300 group-hover:opacity-100" aria-label="Read article">
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<!-- Item 2 — square -->
<div class="group relative mb-4 break-inside-avoid overflow-hidden rounded-2xl" style="aspect-ratio: 1/1;">
<div class="h-full w-full" style="background: linear-gradient(135deg, #f59e0b, #ef4444);"><!-- ws-ok --></div>
<div class="absolute inset-0 flex flex-col justify-end bg-black/0 transition-all duration-300 group-hover:bg-black/50">
<div class="translate-y-4 p-4 text-white opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<p class="text-xs">Feb 28, 2026 · <span>8 comments</span> · <span>3 min read</span></p>
<p class="mt-1 text-sm font-semibold leading-snug">Tailwind v4 first look</p>
</div>
</div>
<a href="#" class="absolute bottom-3 right-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/20 opacity-0 transition-all duration-300 group-hover:opacity-100" aria-label="Read article">
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<!-- Item 3 — landscape -->
<div class="group relative mb-4 break-inside-avoid overflow-hidden rounded-2xl" style="aspect-ratio: 4/3;">
<div class="h-full w-full" style="background: linear-gradient(135deg, #10b981, #0ea5e9);"><!-- ws-ok --></div>
<div class="absolute inset-0 flex flex-col justify-end bg-black/0 transition-all duration-300 group-hover:bg-black/50">
<div class="translate-y-4 p-4 text-white opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<p class="text-xs">Feb 15, 2026 · <span>21 comments</span> · <span>7 min read</span></p>
<p class="mt-1 text-sm font-semibold leading-snug">Building a pattern registry from scratch</p>
</div>
</div>
<a href="#" class="absolute bottom-3 right-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/20 opacity-0 transition-all duration-300 group-hover:opacity-100" aria-label="Read article">
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<!-- Item 4 — tall (aspect-[2/3]) -->
<div class="group relative mb-4 break-inside-avoid overflow-hidden rounded-2xl" style="aspect-ratio: 2/3;">
<div class="h-full w-full" style="background: linear-gradient(160deg, #ec4899, #f97316);"><!-- ws-ok --></div>
<div class="absolute inset-0 flex flex-col justify-end bg-black/0 transition-all duration-300 group-hover:bg-black/50">
<div class="translate-y-4 p-4 text-white opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<p class="text-xs">Jan 30, 2026 · <span>5 comments</span> · <span>4 min read</span></p>
<p class="mt-1 text-sm font-semibold leading-snug">Color tokens with OKLCH</p>
</div>
</div>
<a href="#" class="absolute bottom-3 right-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/20 opacity-0 transition-all duration-300 group-hover:opacity-100" aria-label="Read article">
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<!-- Item 5 — portrait -->
<div class="group relative mb-4 break-inside-avoid overflow-hidden rounded-2xl" style="aspect-ratio: 3/4;">
<div class="h-full w-full" style="background: linear-gradient(135deg, #0ea5e9, #6366f1);"><!-- ws-ok --></div>
<div class="absolute inset-0 flex flex-col justify-end bg-black/0 transition-all duration-300 group-hover:bg-black/50">
<div class="translate-y-4 p-4 text-white opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<p class="text-xs">Jan 14, 2026 · <span>11 comments</span> · <span>6 min read</span></p>
<p class="mt-1 text-sm font-semibold leading-snug">Semantic motion design</p>
</div>
</div>
<a href="#" class="absolute bottom-3 right-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/20 opacity-0 transition-all duration-300 group-hover:opacity-100" aria-label="Read article">
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<!-- Item 6 — landscape -->
<div class="group relative mb-4 break-inside-avoid overflow-hidden rounded-2xl" style="aspect-ratio: 16/9;">
<div class="h-full w-full" style="background: linear-gradient(135deg, #84cc16, #22d3ee);"><!-- ws-ok --></div>
<div class="absolute inset-0 flex flex-col justify-end bg-black/0 transition-all duration-300 group-hover:bg-black/50">
<div class="translate-y-4 p-4 text-white opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<p class="text-xs">Dec 22, 2025 · <span>3 comments</span> · <span>2 min read</span></p>
<p class="mt-1 text-sm font-semibold leading-snug">Quick wins with Webspire CLI</p>
</div>
</div>
<a href="#" class="absolute bottom-3 right-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/20 opacity-0 transition-all duration-300 group-hover:opacity-100" aria-label="Read article">
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<!-- Item 7 — square -->
<div class="group relative mb-4 break-inside-avoid overflow-hidden rounded-2xl" style="aspect-ratio: 1/1;">
<div class="h-full w-full" style="background: linear-gradient(135deg, #a78bfa, #34d399);"><!-- ws-ok --></div>
<div class="absolute inset-0 flex flex-col justify-end bg-black/0 transition-all duration-300 group-hover:bg-black/50">
<div class="translate-y-4 p-4 text-white opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<p class="text-xs">Dec 5, 2025 · <span>9 comments</span> · <span>4 min read</span></p>
<p class="mt-1 text-sm font-semibold leading-snug">Accessibility in UI patterns</p>
</div>
</div>
<a href="#" class="absolute bottom-3 right-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/20 opacity-0 transition-all duration-300 group-hover:opacity-100" aria-label="Read article">
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<!-- Item 8 — portrait -->
<div class="group relative mb-4 break-inside-avoid overflow-hidden rounded-2xl" style="aspect-ratio: 3/4;">
<div class="h-full w-full" style="background: linear-gradient(135deg, #f43f5e, #fbbf24);"><!-- ws-ok --></div>
<div class="absolute inset-0 flex flex-col justify-end bg-black/0 transition-all duration-300 group-hover:bg-black/50">
<div class="translate-y-4 p-4 text-white opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<p class="text-xs">Nov 18, 2025 · <span>17 comments</span> · <span>8 min read</span></p>
<p class="mt-1 text-sm font-semibold leading-snug">From CSS to design system</p>
</div>
</div>
<a href="#" class="absolute bottom-3 right-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/20 opacity-0 transition-all duration-300 group-hover:opacity-100" aria-label="Read article">
<svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
gallerymasonrybloghover-overlaymetadatacolumnsgrid
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle above the grid. |
| items | Yes | Gallery items with image, date, comment count, read time, and link. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns | '2' | '3' | 3 | Number of masonry columns at large breakpoint. |
CSS-only masonry using the columns property. Each card is break-inside-avoid to prevent splitting across columns. The hover overlay with slide-up metadata is pure Tailwind group utilities — no JavaScript required.