Tegels klappen om tot één foto Nieuw

<!-- Tegels klappen om tot één foto · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="htk">
<div class="htk__grid" aria-hidden="true"></div>
<div class="htk__txt">
<h2 class="htk__h">Bloemen van vanochtend, vandaag in Leiden bezorgd</h2>
<a class="htk__cta" href="#hk-tegels-klappen">Stel een boeket samen</a>
</div>
<button class="htk__again" type="button">Nog eens</button>
<img class="htk__alt" src="https://neddev.com/lab-media/hk-tegels-klappen-1.webp" alt="Bloemenwinkel met emmers tulpen en ranonkels bij het raam" width="1376" height="768">
</div>
</div>

/* Tegels klappen om tot één foto · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.htk{position:absolute;inset:0;overflow:hidden;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;--htk-img:url('https://neddev.com/lab-media/hk-tegels-klappen-1.webp')}
.htk *,.htk *::before,.htk *::after{box-sizing:border-box}
.htk__alt{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.htk__grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);perspective:900px}
.htk__t{position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.5,.05,.25,1);transition-delay:var(--d)}
.htk__f,.htk__b{position:absolute;inset:-.5px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.htk__f{background:var(--c)}
.htk__b{transform:rotateY(180deg);background-image:var(--htk-img);background-size:800% 500%;background-position:var(--x) var(--y)}
.htk.is-on .htk__t{transform:rotateY(180deg)}
.htk__txt{position:absolute;left:16px;bottom:16px;max-width:min(78%,420px);padding:14px 16px;background:#fff;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .45s ease 1.1s,transform .45s ease 1.1s}
.htk.is-on .htk__txt{opacity:1;transform:none}
.htk__h{margin:0;font:700 clamp(16px,4.6cqi,28px)/1.08 'Switzer',sans-serif;letter-spacing:-.02em;text-wrap:balance}
.htk__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}
.htk__cta:hover{background:#ff6a36}
.htk__cta:focus-visible,.htk__again:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
.htk__again{position:absolute;top:12px;right:12px;min-height:30px;padding:0 10px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:500 12px/1 'Switzer',sans-serif;cursor:pointer}
.htk__again:hover{background:#2a2a2a}
@media (prefers-reduced-motion:reduce){.htk__t,.htk__txt{transition:none!important}}

// Tegels klappen om tot één foto · © 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('.htk');if(!w)return;
const grid=w.querySelector('.htk__grid'),C=8,R=5,cols=['#f4f3f1','#e9e6e1','#F5480F','#0a0a0a','#dcd8d1'];
let h='';for(let r=0;r<R;r++)for(let c=0;c<C;c++){const col=cols[(c*3+r*2+(c*r))%cols.length];
h+='<div class="htk__t" style="--d:'+((c+r)*70)+'ms"><div class="htk__f" style="--c:'+col+'"></div><div class="htk__b" style="--x:'+(c/(C-1)*100)+'%;--y:'+(r/(R-1)*100)+'%"></div></div>';}
grid.innerHTML=h;
let tm=0;
function play(){clearTimeout(tm);w.classList.remove('is-on');void grid.offsetWidth;tm=setTimeout(()=>w.classList.add('is-on'),500);}
w.querySelector('.htk__again').addEventListener('click',play);
if(matchMedia('(prefers-reduced-motion: reduce)').matches){w.classList.add('is-on');return;}
if('IntersectionObserver' in window){const io=new IntersectionObserver(es=>{if(es[0].isIntersecting){io.disconnect();play();}},{threshold:.4});io.observe(w);}else play();
}
init(document.querySelector('.jouw-container'));