gallery hover overlay metadata portfolio photography css-only gallery hover overlay metadata title category portfolio photography hover image overlay with title portfolio grid with metadata on hover
Gallery Hover Metadata
Fetch pattern JSON:
curl https://webspire.de/patterns/gallery/hover-metadata.json hover-metadata.html
<section class="ws-gallery bg-[var(--ws-gallery-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Portfolio</h2>
<p class="mt-4 text-base text-[var(--ws-gallery-text-soft)]">Hover over an image to reveal its details.</p>
</div>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
<!-- Item 1 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl">
<div class="h-full w-full bg-gradient-to-br from-indigo-300 to-violet-500 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute left-3 top-3 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="block text-[10px] font-semibold uppercase tracking-widest text-white/70">Branding</span>
<span class="block text-sm font-bold text-white">Violet Identity</span>
</div>
<div class="absolute bottom-3 right-3 translate-y-1 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
</div>
<!-- Item 2 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl">
<div class="h-full w-full bg-gradient-to-br from-rose-300 to-pink-500 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute left-3 top-3 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="block text-[10px] font-semibold uppercase tracking-widest text-white/70">Photography</span>
<span class="block text-sm font-bold text-white">Rose Campaign</span>
</div>
<div class="absolute bottom-3 right-3 translate-y-1 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
</div>
<!-- Item 3 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl">
<div class="h-full w-full bg-gradient-to-br from-emerald-300 to-teal-500 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute left-3 top-3 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="block text-[10px] font-semibold uppercase tracking-widest text-white/70">UI Design</span>
<span class="block text-sm font-bold text-white">Teal Dashboard</span>
</div>
<div class="absolute bottom-3 right-3 translate-y-1 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
</div>
<!-- Item 4 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl">
<div class="h-full w-full bg-gradient-to-br from-amber-300 to-orange-500 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute left-3 top-3 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="block text-[10px] font-semibold uppercase tracking-widest text-white/70">Illustration</span>
<span class="block text-sm font-bold text-white">Amber Series</span>
</div>
<div class="absolute bottom-3 right-3 translate-y-1 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
</div>
<!-- Item 5 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl">
<div class="h-full w-full bg-gradient-to-br from-sky-300 to-blue-500 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute left-3 top-3 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="block text-[10px] font-semibold uppercase tracking-widest text-white/70">Motion</span>
<span class="block text-sm font-bold text-white">Sky Loops</span>
</div>
<div class="absolute bottom-3 right-3 translate-y-1 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
</div>
<!-- Item 6 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl">
<div class="h-full w-full bg-gradient-to-br from-fuchsia-300 to-purple-500 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute left-3 top-3 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="block text-[10px] font-semibold uppercase tracking-widest text-white/70">Branding</span>
<span class="block text-sm font-bold text-white">Purple Haze</span>
</div>
<div class="absolute bottom-3 right-3 translate-y-1 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
</div>
<!-- Item 7 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl">
<div class="h-full w-full bg-gradient-to-br from-lime-300 to-green-500 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute left-3 top-3 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="block text-[10px] font-semibold uppercase tracking-widest text-white/70">Environmental</span>
<span class="block text-sm font-bold text-white">Green World</span>
</div>
<div class="absolute bottom-3 right-3 translate-y-1 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
</div>
<!-- Item 8 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl">
<div class="h-full w-full bg-gradient-to-br from-cyan-300 to-sky-500 transition-transform duration-500 group-hover:scale-105"></div>
<div class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute left-3 top-3 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="block text-[10px] font-semibold uppercase tracking-widest text-white/70">Photography</span>
<span class="block text-sm font-bold text-white">Cyan Waves</span>
</div>
<div class="absolute bottom-3 right-3 translate-y-1 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
galleryhoveroverlaymetadataportfoliophotographycss-only
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| grid | Yes | 4x2 grid of images with hover overlay. |
4×2 grid of square image cards. At rest only the image is visible. On hover: a dark overlay fades in, a category label + title slide down from the top-left, and an arrow icon appears at the bottom-right. All transitions are pure Tailwind group-hover: utilities — no JavaScript.