Polaroid die zich ontwikkelt New

<!-- Polaroid die zich ontwikkelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hpo">
<div class="hpo__txt">
<h2 class="hpo__h">Foto's die je over tien jaar nog ophangt</h2>
<p class="hpo__p">Lotte de Wit, fotograaf in Haarlem. Gezinnen, bruiloften en newborn.</p>
<div class="hpo__row"><a class="hpo__cta" href="#hk-polaroid">Boek een shoot</a><button class="hpo__next" type="button">Nog een foto</button></div>
</div>
<div class="hpo__cam" aria-hidden="true"></div>
<figure class="hpo__card" aria-live="polite">
<div class="hpo__img"><img src="https://neddev.com/lab-media/hk-polaroid-1.webp" alt="Stel loopt hand in hand over het strand van Zandvoort"></div>
<figcaption class="hpo__cap">Zandvoort, juni</figcaption>
</figure>
</div>
</div>

/* Polaroid die zich ontwikkelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hpo{position:absolute;inset:0;overflow:hidden;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.hpo *,.hpo *::before,.hpo *::after{box-sizing:border-box}
.hpo__txt{position:absolute;left:clamp(16px,5cqi,40px);top:50%;transform:translateY(-50%);width:52%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:2}
.hpo__h{margin:0;font:700 clamp(18px,6.2cqi,40px)/1.04 'Switzer',sans-serif;letter-spacing:-.025em;text-wrap:balance}
.hpo__p{margin:0;font:400 clamp(12px,2.8cqi,15px)/1.4 'Switzer',sans-serif;color:#3a3833}
.hpo__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hpo__cta{padding:9px 14px;background:#F5480F;color:#0a0a0a;border-radius:4px;font:600 13px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.hpo__cta:hover{background:#ff6a36}
.hpo__next{min-height:31px;padding:0 12px;border:1px solid rgba(10,10,10,.3);border-radius:4px;background:transparent;color:#0a0a0a;font:500 13px/1 'Switzer',sans-serif;cursor:pointer}
.hpo__next:hover{border-color:#0a0a0a}
.hpo__cta:focus-visible,.hpo__next:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
.hpo__cam{position:absolute;right:clamp(10px,4cqi,40px);top:0;width:clamp(130px,40cqi,300px);height:10cqh;background:#0a0a0a;border-radius:0 0 8px 8px;z-index:3}
.hpo__cam::after{content:'';position:absolute;left:8%;right:8%;bottom:22%;height:3px;background:#3a3a3a;border-radius:2px}
.hpo__card{position:absolute;right:calc(clamp(10px,4cqi,40px) + clamp(130px,40cqi,300px)*.08);top:calc(10cqh - 4px);width:calc(clamp(130px,40cqi,300px)*.84);margin:0;padding:calc(clamp(130px,40cqi,300px)*.05) calc(clamp(130px,40cqi,300px)*.05) 0;background:#fff;box-shadow:0 1px 2px rgba(10,10,10,.12),0 14px 28px rgba(10,10,10,.16);z-index:2;transform:translateY(-104%) rotate(0deg);transition:transform 1.1s cubic-bezier(.3,.6,.2,1)}
.hpo.is-out .hpo__card{transform:translateY(0) rotate(-2.5deg)}
.hpo__img{position:relative;aspect-ratio:1;overflow:hidden;background:#1a140f}
.hpo__img img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.18) sepia(1) contrast(.7) saturate(.6);opacity:.85}
.hpo.is-dev .hpo__img img{filter:brightness(1) sepia(.08) contrast(1) saturate(1);opacity:1;transition:filter 4.2s cubic-bezier(.4,0,.3,1),opacity 4.2s}
.hpo__cap{padding:6px 0 8px;font:500 clamp(12px,2.6cqi,15px)/1.2 'Switzer',sans-serif;font-style:italic;color:#3a3833;text-align:center;transform:rotate(-1deg)}
@container (max-width:440px){.hpo__txt{width:calc(56% - 26px)}}
@media (prefers-reduced-motion:reduce){.hpo__card,.hpo.is-dev .hpo__img img{transition:none}}

// Polaroid die zich ontwikkelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.hpo');if(!w)return;
const img=w.querySelector('.hpo__img img'),cap=w.querySelector('.hpo__cap'),btn=w.querySelector('.hpo__next');
const F=[['hk-polaroid-1','Zandvoort, juni','Stel loopt hand in hand over het strand van Zandvoort'],['hk-polaroid-2','Polder bij Spaarndam','Vader en twee kinderen fietsen door de polder'],['hk-polaroid-3','Elf dagen oud','Babyhandje om de vinger van een volwassene']];
const base=img.getAttribute('src').replace(/hk-polaroid-1\.webp.*/,'');
const rm=matchMedia('(prefers-reduced-motion: reduce)').matches;let i=0,tms=[];
function shoot(){tms.forEach(clearTimeout);tms=[];
if(rm){img.src=base+F[i][0]+'.webp';img.alt=F[i][2];cap.textContent=F[i][1];w.classList.add('is-out','is-dev');return;}
w.classList.remove('is-dev');w.classList.remove('is-out');
tms.push(setTimeout(()=>{img.src=base+F[i][0]+'.webp';img.alt=F[i][2];cap.textContent=F[i][1];w.classList.add('is-out');},w.dataset.once?650:200));
tms.push(setTimeout(()=>w.classList.add('is-dev'),w.dataset.once?1900:1450));w.dataset.once='1';}
btn.addEventListener('click',()=>{i=(i+1)%F.length;shoot();});
F.slice(1).forEach(f=>{const p=new Image();p.src=base+f[0]+'.webp';});
if('IntersectionObserver' in window){const io=new IntersectionObserver(es=>{if(es[0].isIntersecting){io.disconnect();shoot();}},{threshold:.4});io.observe(w);}else shoot();
}
init(document.querySelector('.jouw-container'));