Gesplitste hero die naar je keuze schuift Nieuw
Twee helften met elk een foto en een doelgroep; wijs je er een aan of tab je erheen, dan schuift die helft breed open en toont hij een extra regel, terwijl de andere smal en donker wordt. Alleen CSS (flex-grow met :hover, :focus-visible en :has). Inzetten als hero van een bedrijf met twee doelgroepen: schoonmaak thuis en zakelijk, particulier en ondernemer, huur en koop.
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Geen JavaScript nodig.
<!-- 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}}Meer uit hero-stijlen
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →