Gesplitste hero die naar je keuze schuift New
Two halves, each with a photo and an audience; point at one or tab to it and that half slides wide open and shows an extra line, while the other becomes narrow and dark. Pure CSS (flex-grow with :hover, :focus-visible and :has). Use it as the hero of a business with two audiences: home and office cleaning, private and business, rent and buy.
How to use it
- Paste the HTML where the hero styles should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Gesplitste hero die naar je keuze schuift · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hsk">
<a class="hsk__k" href="#hk-split-kies">
<img src="https://neddev.com/lab-media/hk-split-kies-1.webp" alt="" width="1376" height="768">
<span class="hsk__t"><span class="hsk__h">Voor thuis</span><span class="hsk__p">Schoonmaakbedrijf Helder: vaste hulp vanaf € 26 per uur, ook om de week.</span></span>
</a>
<a class="hsk__k" href="#hk-split-kies">
<img src="https://neddev.com/lab-media/hk-split-kies-2.webp" alt="" width="1376" height="768">
<span class="hsk__t"><span class="hsk__h">Voor bedrijven</span><span class="hsk__p">Schoonmaakbedrijf Helder: kantoren en praktijken in Rotterdam, 's avonds.</span></span>
</a>
</div>
</div>/* Gesplitste hero die naar je keuze schuift · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hsk{position:absolute;inset:0;overflow:hidden;display:flex;background:#0a0a0a;color:#fff;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.hsk *,.hsk *::before,.hsk *::after{box-sizing:border-box}
.hsk__k{position:relative;flex:1 1 0;min-width:0;overflow:hidden;color:#fff;text-decoration:none;transition:flex-grow .55s cubic-bezier(.3,.7,.2,1)}
.hsk__k+.hsk__k{border-left:2px solid #F5480F}
.hsk__k img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform .8s cubic-bezier(.3,.7,.2,1),filter .45s}
.hsk__k::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.78),rgba(10,10,10,.1) 70%);transition:background-color .45s}
.hsk__t{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:6px}
.hsk__h{font:700 clamp(17px,5.6cqi,36px)/1.02 'Switzer',sans-serif;letter-spacing:-.02em;transition:font-size .45s ease}
.hsk:has(.hsk__k:hover,.hsk__k:focus-visible) .hsk__k:not(:hover):not(:focus-visible) .hsk__h{font-size:clamp(14px,3.8cqi,26px)}
.hsk__p{max-width:20em;font:400 clamp(12px,2.8cqi,15px)/1.4 'Switzer',sans-serif;color:#eceae6;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s ease}
.hsk:has(.hsk__k:hover,.hsk__k:focus-visible) .hsk__k{flex-grow:.62}
.hsk:has(.hsk__k:hover,.hsk__k:focus-visible) .hsk__k:is(:hover,:focus-visible){flex-grow:1.9}
.hsk .hsk__k:hover img,.hsk .hsk__k:focus-visible img{transform:scale(1)}
.hsk .hsk__k:hover .hsk__p,.hsk .hsk__k:focus-visible .hsk__p{max-height:5em;opacity:1}
.hsk:has(.hsk__k:hover,.hsk__k:focus-visible) .hsk__k:not(:hover):not(:focus-visible) img{filter:brightness(.45) grayscale(.6)}
.hsk__k:focus-visible{outline:3px solid #fff;outline-offset:-5px}
@media (prefers-reduced-motion:reduce){.hsk__k,.hsk__k img,.hsk__p{transition:none}}More hero styles
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →