Ripple Grid Hover

<!-- Ripple Grid Hover · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="rgh-stage"><div class="rgh-grid"></div></div>
</div>

/* Ripple Grid Hover · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.rgh-stage{position:absolute;inset:0;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.rgh-grid{position:absolute;inset:0;display:grid;padding:14px;gap:7px}
.rgh-cell{border-radius:5px;background:rgba(10,10,10,.06);transform:scale(.7);transition:transform .25s ease,background .25s ease;will-change:transform}

// Ripple Grid Hover · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.rgh-stage')||root;var grid=root.querySelector('.rgh-grid');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var cols=11,rows=7,cells=[];grid.style.gridTemplateColumns='repeat('+cols+',1fr)';grid.style.gridTemplateRows='repeat('+rows+',1fr)';for(var i=0;i<cols*rows;i++){var c=document.createElement('div');c.className='rgh-cell';grid.appendChild(c);cells.push(c);}if(reduce){cells.forEach(function(c){c.style.transform='scale(.85)';});return;}var R=130;root.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect();var mx=e.clientX-r.left,my=e.clientY-r.top;cells.forEach(function(c){var cr=c.getBoundingClientRect();var cx=cr.left-r.left+cr.width/2,cy=cr.top-r.top+cr.height/2;var d=Math.hypot(mx-cx,my-cy);var t=Math.max(0,1-d/R);c.style.transform='scale('+(.7+t*.55).toFixed(3)+')';c.style.background='rgba(245,72,15,'+(t*0.8).toFixed(3)+')';});});root.addEventListener('mouseleave',function(){cells.forEach(function(c){c.style.transform='scale(.7)';c.style.background='rgba(10,10,10,.06)';});});
}
init(document.querySelector('.jouw-container'));