cards hover expand flex transition css-only gallery categories cards expand hover flex transition accordion image categories expanding card row on hover flex card accordion effect image cards that expand CSS only
Cards Expand Hover
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/expand-hover.json expand-hover.html
<section class="ws-cards bg-[var(--ws-cards-bg)] py-16">
<div class="mx-auto max-w-7xl px-6">
<h2 class="mb-8 text-center text-2xl font-bold text-[var(--ws-cards-text)]">Our Collections</h2>
<!-- Expand-on-hover card row -->
<div class="flex flex-col gap-4 lg:flex-row lg:gap-0 lg:overflow-hidden lg:rounded-2xl">
<!-- Card 1 -->
<div class="group relative flex min-h-[300px] flex-1 cursor-pointer overflow-hidden transition-all duration-500 ease-in-out lg:flex-[1] lg:hover:flex-[2.5] lg:min-h-[440px]">
<div class="absolute inset-0 bg-gradient-to-br from-violet-700 to-purple-900 transition-transform duration-500 group-hover:scale-110"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
<div class="absolute inset-x-0 bottom-0 p-6 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="mb-1 block text-xs font-semibold uppercase tracking-widest text-violet-300">Editorial</span>
<p class="text-xl font-bold text-white">Design & Culture</p>
</div>
<!-- Static label always visible -->
<div class="absolute inset-x-0 bottom-0 p-6 transition-opacity duration-300 group-hover:opacity-0">
<p class="text-sm font-semibold text-white/60">Design</p>
</div>
</div>
<!-- Card 2 -->
<div class="group relative flex min-h-[300px] flex-1 cursor-pointer overflow-hidden transition-all duration-500 ease-in-out lg:flex-[1] lg:hover:flex-[2.5] lg:min-h-[440px]">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-600 to-teal-800 transition-transform duration-500 group-hover:scale-110"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
<div class="absolute inset-x-0 bottom-0 p-6 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="mb-1 block text-xs font-semibold uppercase tracking-widest text-emerald-300">Technology</span>
<p class="text-xl font-bold text-white">Tools & Workflow</p>
</div>
<div class="absolute inset-x-0 bottom-0 p-6 transition-opacity duration-300 group-hover:opacity-0">
<p class="text-sm font-semibold text-white/60">Tech</p>
</div>
</div>
<!-- Card 3 -->
<div class="group relative flex min-h-[300px] flex-1 cursor-pointer overflow-hidden transition-all duration-500 ease-in-out lg:flex-[1] lg:hover:flex-[2.5] lg:min-h-[440px]">
<div class="absolute inset-0 bg-gradient-to-br from-orange-600 to-rose-800 transition-transform duration-500 group-hover:scale-110"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
<div class="absolute inset-x-0 bottom-0 p-6 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="mb-1 block text-xs font-semibold uppercase tracking-widest text-orange-300">Business</span>
<p class="text-xl font-bold text-white">Growth & Strategy</p>
</div>
<div class="absolute inset-x-0 bottom-0 p-6 transition-opacity duration-300 group-hover:opacity-0">
<p class="text-sm font-semibold text-white/60">Business</p>
</div>
</div>
<!-- Card 4 -->
<div class="group relative flex min-h-[300px] flex-1 cursor-pointer overflow-hidden transition-all duration-500 ease-in-out lg:flex-[1] lg:hover:flex-[2.5] lg:min-h-[440px]">
<div class="absolute inset-0 bg-gradient-to-br from-sky-600 to-indigo-800 transition-transform duration-500 group-hover:scale-110"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
<div class="absolute inset-x-0 bottom-0 p-6 translate-y-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
<span class="mb-1 block text-xs font-semibold uppercase tracking-widest text-sky-300">Community</span>
<p class="text-xl font-bold text-white">People & Stories</p>
</div>
<div class="absolute inset-x-0 bottom-0 p-6 transition-opacity duration-300 group-hover:opacity-0">
<p class="text-sm font-semibold text-white/60">Community</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardshoverexpandflextransitioncss-onlygallerycategories
Four image cards arranged in a horizontal flex row. On hover any card expands to ~2.5× its base width using a CSS transition-all on flex-grow, while sibling cards proportionally shrink. Text content fades in on hover via group-hover:opacity-100. On mobile, cards stack vertically at equal height.