hero split hover expand dual-audience interactive css-only hero split hover expand flex dual transition css-only split hero with hover expand dual panel hero with animation two audience hero section
Hero Split Hover Expand
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/split-hover-expand.json split-hover-expand.html
<section class="ws-hero ws-hero-split-expand overflow-hidden" style="--hero-text: var(--ws-color-text);">
<div class="flex min-h-[60vh] flex-col lg:flex-row">
<!-- Left panel -->
<div
class="group/left relative flex flex-1 cursor-pointer flex-col items-center justify-center overflow-hidden p-12 text-center transition-all duration-500 ease-in-out
lg:flex-[1] lg:hover:flex-[1.6] lg:[&:has(~*:hover)]:flex-[0.4]"
>
<div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 transition-transform duration-500 group-hover/left:scale-105"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
<div class="relative z-10 flex flex-col items-center gap-5">
<span class="text-xs font-semibold uppercase tracking-[0.25em] text-white/60">For Creators</span>
<h2 class="text-balance text-3xl font-bold text-white lg:text-4xl xl:text-5xl">Build your portfolio.</h2>
<p class="max-w-sm text-sm text-white/70 opacity-0 transition-opacity duration-300 group-hover/left:opacity-100">
Showcase your work with beautiful templates designed for creatives.
</p>
<a href="#" class="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
Get started
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
</a>
</div>
</div>
<!-- Right panel -->
<div
class="group/right relative flex flex-1 cursor-pointer flex-col items-center justify-center overflow-hidden p-12 text-center transition-all duration-500 ease-in-out
lg:flex-[1] lg:hover:flex-[1.6] lg:[&:has(~*:hover)]:flex-[0.4]"
>
<div class="absolute inset-0 bg-gradient-to-bl from-violet-900 via-purple-800 to-indigo-900 transition-transform duration-500 group-hover/right:scale-105"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
<div class="relative z-10 flex flex-col items-center gap-5">
<span class="text-xs font-semibold uppercase tracking-[0.25em] text-white/60">For Teams</span>
<h2 class="text-balance text-3xl font-bold text-white lg:text-4xl xl:text-5xl">Scale your business.</h2>
<p class="max-w-sm text-sm text-white/70 opacity-0 transition-opacity duration-300 group-hover/right:opacity-100">
Powerful collaboration tools and analytics that grow with your team.
</p>
<a href="#" class="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
herosplithoverexpanddual-audienceinteractivecss-only
Enhanced split hero with a CSS flex-grow expand interaction. One panel grows to roughly 60% on hover while the sibling shrinks proportionally. Both panels have centered labels, headlines, and CTAs. On mobile the panels stack vertically.