gallery categories tiles grid ecommerce portfolio hover image gallery categories tiles grid hover image ecommerce browse category tiles with images shop category grid with hover image tile navigation grid
Gallery Category Tiles
Fetch pattern JSON:
curl https://webspire.de/patterns/gallery/category-tiles.json category-tiles.html
<section class="ws-gallery bg-[var(--ws-gallery-bg)] py-16">
<div class="mx-auto max-w-7xl px-6">
<!-- Section header -->
<div class="mb-10 flex items-end justify-between">
<div>
<h2 class="text-3xl font-bold text-[var(--ws-gallery-text)]">Browse by Category</h2>
<p class="mt-2 text-[var(--ws-gallery-text-soft)]">Find exactly what you're looking for.</p>
</div>
<a href="#" class="hidden text-sm font-semibold text-violet-600 hover:text-violet-700 sm:block dark:hover:text-violet-300">
View all →
</a>
</div>
<!-- 3×2 tile grid -->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- Tile 1 -->
<a href="#" class="group relative flex min-h-[280px] flex-col justify-end overflow-hidden rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-br from-violet-700 to-purple-900 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/20 to-transparent"></div>
<div class="relative p-6">
<p class="text-sm font-semibold text-white/70">128 items</p>
<p class="mt-1 text-xl font-bold text-white">Furniture</p>
<span class="mt-2 inline-flex items-center gap-1 text-sm font-medium text-white/80 transition-all group-hover:gap-2">
Browse
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</div>
</a>
<!-- Tile 2 -->
<a href="#" class="group relative flex min-h-[280px] flex-col justify-end overflow-hidden rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-600 to-teal-800 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/20 to-transparent"></div>
<div class="relative p-6">
<p class="text-sm font-semibold text-white/70">94 items</p>
<p class="mt-1 text-xl font-bold text-white">Plants & Garden</p>
<span class="mt-2 inline-flex items-center gap-1 text-sm font-medium text-white/80 transition-all group-hover:gap-2">
Browse
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</div>
</a>
<!-- Tile 3 -->
<a href="#" class="group relative flex min-h-[280px] flex-col justify-end overflow-hidden rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-br from-orange-600 to-amber-800 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/20 to-transparent"></div>
<div class="relative p-6">
<p class="text-sm font-semibold text-white/70">67 items</p>
<p class="mt-1 text-xl font-bold text-white">Lighting</p>
<span class="mt-2 inline-flex items-center gap-1 text-sm font-medium text-white/80 transition-all group-hover:gap-2">
Browse
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</div>
</a>
<!-- Tile 4 -->
<a href="#" class="group relative flex min-h-[280px] flex-col justify-end overflow-hidden rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-br from-sky-600 to-indigo-800 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/20 to-transparent"></div>
<div class="relative p-6">
<p class="text-sm font-semibold text-white/70">211 items</p>
<p class="mt-1 text-xl font-bold text-white">Textiles</p>
<span class="mt-2 inline-flex items-center gap-1 text-sm font-medium text-white/80 transition-all group-hover:gap-2">
Browse
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</div>
</a>
<!-- Tile 5 -->
<a href="#" class="group relative flex min-h-[280px] flex-col justify-end overflow-hidden rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-br from-rose-600 to-pink-800 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/20 to-transparent"></div>
<div class="relative p-6">
<p class="text-sm font-semibold text-white/70">53 items</p>
<p class="mt-1 text-xl font-bold text-white">Ceramics</p>
<span class="mt-2 inline-flex items-center gap-1 text-sm font-medium text-white/80 transition-all group-hover:gap-2">
Browse
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</div>
</a>
<!-- Tile 6 -->
<a href="#" class="group relative flex min-h-[280px] flex-col justify-end overflow-hidden rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-br from-slate-600 to-slate-800 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/20 to-transparent"></div>
<div class="relative p-6">
<p class="text-sm font-semibold text-white/70">179 items</p>
<p class="mt-1 text-xl font-bold text-white">Storage</p>
<span class="mt-2 inline-flex items-center gap-1 text-sm font-medium text-white/80 transition-all group-hover:gap-2">
Browse
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</span>
</div>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
gallerycategoriestilesgridecommerceportfoliohoverimage
Six full-cover category tiles in a responsive 3×2 grid (collapses to 2-col then 1-col on mobile). Each tile shows a gradient image placeholder, category name, item count, and a “Browse →” link. On hover the background scales up subtly and the arrow shifts right — all via CSS group-hover.