Hero met Ken Burns-beeld Nieuw
Hero met een foto die in 26 seconden langzaam inzoomt en verschuift (Ken Burns), met tekst erover en een pauzeknop rechtsonder, nodig voor WCAG 2.2.2 bij beweging langer dan 5 seconden. Pure CSS: transform-animatie plus animation-play-state via :has() op een echte checkbox. Bij reduced motion staat het beeld stil en verdwijnt de knop. Werkt in elke browser.
Boerderijcamping · Alblasserwaard
Wakker worden tussen de koeien en de molens.
Plek reserverenvanaf € 32 per nacht
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.
<!-- Hero met Ken Burns-beeld · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kbh">
<div class="kbh__img" aria-hidden="true"><img src="https://neddev.com/lab-media/ken-burns-hero-1.webp" alt="" width="1376" height="768"></div>
<div class="kbh__txt">
<span class="kbh__k">Boerderijcamping · Alblasserwaard</span>
<h4 class="kbh__h">Wakker worden tussen de koeien en de molens.</h4>
<div class="kbh__cta"><a class="kbh__b" href="#ken-burns-hero">Plek reserveren</a><span class="kbh__p">vanaf € 32 per nacht</span></div>
</div>
<label class="kbh__pause"><input type="checkbox"><span class="kbh__ico" aria-hidden="true"><i></i><i></i></span><span class="kbh__lt">Beweging pauzeren</span></label>
</div>
</div>/* Hero met Ken Burns-beeld · NedDev · eigen werk. */
.kbh{position:absolute;inset:0;overflow:hidden;background:#2f3a2c;color:#fff;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.kbh__img{position:absolute;inset:0;overflow:hidden}
.kbh__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:62% 40%;will-change:transform}
.kbh::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.68),rgba(10,10,10,.25) 62%,rgba(10,10,10,0)),linear-gradient(0deg,rgba(10,10,10,.45),rgba(10,10,10,0) 45%);pointer-events:none}
.kbh__txt{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:8px;max-width:24em}
.kbh__k{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#ffe2d6}
.kbh__h{margin:0;font:800 clamp(20px,7cqi,40px)/1.04 'Switzer',sans-serif;letter-spacing:-.035em;text-wrap:balance}
.kbh__cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kbh__b{display:inline-block;padding:10px 16px;background:#F5480F;color:#0a0a0a;font:600 13px 'Switzer',sans-serif;text-decoration:none;border-radius:4px;transition:background-color .16s,transform .16s}
.kbh__b:hover{background:#ff6a36}.kbh__b:active{transform:scale(.975)}
.kbh__b:focus-visible{outline:2px solid #fff;outline-offset:3px}
.kbh__p{font:500 11px 'JetBrains Mono',monospace;color:#f1ede7}
.kbh__pause{position:absolute;right:12px;bottom:12px;z-index:3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.55);cursor:pointer;transition:background-color .16s}
.kbh__pause:hover{background:rgba(10,10,10,.8)}
.kbh__pause input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.kbh__pause:has(input:focus-visible){outline:2px solid #F5480F;outline-offset:2px}
.kbh__ico{display:flex;gap:3px}
.kbh__ico i{display:block;width:3px;height:11px;background:#fff;border-radius:1px}
.kbh__pause:has(input:checked) .kbh__ico{gap:0}
.kbh__pause:has(input:checked) .kbh__ico i:first-child{width:0;height:0;background:none;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.kbh__pause:has(input:checked) .kbh__ico i+i{display:none}
.kbh__lt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kbh__pause::after{content:'Pauzeer';position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);font:500 10px 'JetBrains Mono',monospace;background:#0a0a0a;color:#fff;padding:3px 6px;border-radius:3px;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}
.kbh__pause:has(input:checked)::after{content:'Afspelen'}
.kbh__pause:hover::after,.kbh__pause:has(input:focus-visible)::after{opacity:1}
@media (prefers-reduced-motion:no-preference){
.kbh__img img{animation:kbh-kb 26s ease-in-out infinite alternate}
.kbh:has(.kbh__pause input:checked) .kbh__img img{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.kbh__pause{display:none}}
@keyframes kbh-kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.16) translate(-3.5%,2%)}}
@container (max-width:380px){.kbh__txt{left:14px;right:52px;bottom:12px;gap:6px}.kbh__b{padding:8px 12px;font-size:12px}}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 →