Kop als stickers op de foto New
The words of the heading are slapped onto the photo one by one as stickers, each slightly askew with a curling corner. You can drag them around with mouse or finger. For screen readers the heading stays one plain sentence. Use it as the hero of a pizzeria, ice cream parlour, food truck or event that may look playful. With reduced motion they are there at once.
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.
<!-- Kop als stickers op de foto · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hst">
<img class="hst__img" src="https://neddev.com/lab-media/hk-stickers-1.webp" alt="Pizza margherita uit de houtoven op een houten tafel" width="1376" height="768">
<h2 class="hst__h"><span class="hst__sr">Echte pizza uit de houtoven</span>
<span class="hst__s" aria-hidden="true" style="--r:-6deg;--x:6%;--y:12%">Echte</span>
<span class="hst__s hst__s--o" aria-hidden="true" style="--r:4deg;--x:30%;--y:9%">pizza</span>
<span class="hst__s" aria-hidden="true" style="--r:-3deg;--x:9%;--y:36%">uit</span>
<span class="hst__s hst__s--o" aria-hidden="true" style="--r:6deg;--x:22%;--y:38%">de</span>
<span class="hst__s hst__s--z" aria-hidden="true" style="--r:5deg;--x:36%;--y:33%">houtoven</span>
</h2>
<div class="hst__foot">
<p class="hst__p">Pizzeria Fuoco · Nieuwe Binnenweg 120, Rotterdam</p>
<a class="hst__cta" href="#hk-stickers">Reserveer een tafel</a>
</div>
<button class="hst__again" type="button">Opnieuw plakken</button>
</div>
</div>/* Kop als stickers op de foto · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hst{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.hst *,.hst *::before,.hst *::after{box-sizing:border-box}
.hst__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.82)}
.hst__h{position:absolute;inset:0;margin:0;font:700 clamp(20px,7.4cqi,46px)/1 'Switzer',sans-serif;letter-spacing:-.02em}
.hst__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hst__s{position:absolute;left:var(--x);top:var(--y);padding:.14em .3em .18em;background:#fff;border-radius:8px;transform:rotate(var(--r));box-shadow:0 2px 0 rgba(10,10,10,.18),0 8px 18px rgba(10,10,10,.28);cursor:grab;user-select:none;touch-action:none;white-space:nowrap;opacity:0}
.hst__s::after{content:'';position:absolute;right:0;bottom:0;width:.42em;height:.42em;border-radius:0 0 8px 0;background:linear-gradient(135deg,#d9d5ce 50%,transparent 50%);box-shadow:-2px -2px 3px rgba(10,10,10,.12)}
.hst__s--o{background:#F5480F}
.hst__s--z{background:#0a0a0a;color:#fff}
.hst__s--z::after{background:linear-gradient(135deg,#3a3a3a 50%,transparent 50%)}
.hst__s.is-on{opacity:1;animation:hst-plak .42s cubic-bezier(.3,1.5,.5,1) both}
.hst__s.is-drag{cursor:grabbing;box-shadow:0 2px 0 rgba(10,10,10,.18),0 16px 30px rgba(10,10,10,.4);z-index:2}
@keyframes hst-plak{0%{opacity:0;transform:rotate(calc(var(--r)*3)) scale(1.7)}60%{opacity:1;transform:rotate(var(--r)) scale(.94)}100%{opacity:1;transform:rotate(var(--r)) scale(1)}}
.hst__foot{position:absolute;left:16px;right:16px;bottom:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.hst__p{margin:0;padding:6px 8px;background:rgba(10,10,10,.72);color:#fff;border-radius:4px;font:500 12px/1.3 'Switzer',sans-serif}
.hst__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}
.hst__cta:hover{background:#ff6a36}
.hst__cta:focus-visible,.hst__again:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hst__again{position:absolute;top:12px;right:12px;min-height:30px;padding:0 10px;border:0;border-radius:4px;background:#fff;color:#0a0a0a;font:500 12px/1 'Switzer',sans-serif;cursor:pointer}
.hst__again:hover{background:#f4f3f1}
@media (prefers-reduced-motion:reduce){.hst__s.is-on{animation:none}}// Kop als stickers op de 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('.hst');if(!w)return;
const S=[...w.querySelectorAll('.hst__s')],rm=matchMedia('(prefers-reduced-motion: reduce)').matches;let tms=[];
function play(){tms.forEach(clearTimeout);tms=[];S.forEach(s=>{s.classList.remove('is-on');s.style.translate='';});
S.forEach((s,i)=>{if(rm)s.classList.add('is-on');else tms.push(setTimeout(()=>s.classList.add('is-on'),350+i*330));});}
S.forEach(s=>{let sx=0,sy=0,ox=0,oy=0,id=null;
s.addEventListener('pointerdown',e=>{id=e.pointerId;s.setPointerCapture(id);s.classList.add('is-drag');sx=e.clientX;sy=e.clientY;const m=(s.style.translate||'0px 0px').split(' ');ox=parseFloat(m[0])||0;oy=parseFloat(m[1])||0;});
s.addEventListener('pointermove',e=>{if(e.pointerId!==id)return;const W=w.getBoundingClientRect(),r=s.getBoundingClientRect();
let nx=ox+e.clientX-sx,ny=oy+e.clientY-sy;const cx=r.left-(parseFloat((s.style.translate||'0').split(' ')[0])||0),cy=r.top-(parseFloat((s.style.translate||'0px 0px').split(' ')[1])||0);
nx=Math.max(W.left-cx,Math.min(W.right-r.width-cx,nx));ny=Math.max(W.top-cy,Math.min(W.bottom-r.height-cy,ny));s.style.translate=nx+'px '+ny+'px';});
const up=()=>{id=null;s.classList.remove('is-drag');};s.addEventListener('pointerup',up);s.addEventListener('pointercancel',up);});
w.querySelector('.hst__again').addEventListener('click',play);
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 →