Hero met Ken Burns-beeld New
Hero with a photo that slowly zooms and pans over 26 seconds (Ken Burns), text on top and a pause button bottom right, required by WCAG 2.2.2 for motion longer than 5 seconds. Pure CSS: a transform animation plus animation-play-state via :has() on a real checkbox. With reduced motion the image stands still and the button disappears. Works in every browser.
Boerderijcamping · Alblasserwaard
Wakker worden tussen de koeien en de molens.
Plek reserverenvanaf € 32 per nacht
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.
<!-- 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}}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 →