Tegels klappen om tot één foto New

A grid of forty tiles flips diagonally on load; the back of each tile carries exactly its piece of the photo, so one image remains after the wave. Pure CSS 3D with a delay per tile. Works well as the hero of a florist, baker or shop with one strong mood photo. With reduced motion the photo shows straight away.

Bloemen van vanochtend, vandaag in Leiden bezorgd

Stel een boeket samen

Bloemenwinkel met emmers tulpen en ranonkels bij het raam

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.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

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 →