Direction-Aware Hover

<!-- Direction-Aware Hover · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="dah-root"><div class="dah-bg"></div><div class="dah-overlay"><div class="dah-content"><b>Direction Aware</b><span>Komt binnen vanaf jouw rand</span></div></div></div>
</div>

/* Direction-Aware Hover · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.dah-root{position:absolute;inset:0;overflow:hidden;cursor:pointer}
.dah-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}
.dah-overlay{position:absolute;inset:0;background:rgba(245,72,15,.92);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .35s ease;transform:translate(var(--tx,0),var(--ty,100%))}
.dah-content{text-align:center;font-family:'Switzer',sans-serif}.dah-content b{display:block;font-size:18px;font-weight:700}.dah-content span{font-size:12px;opacity:.85}

// Direction-Aware Hover · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var overlay=root.querySelector('.dah-overlay');
function setFrom(e){var r=root.getBoundingClientRect();var x=(e.clientX-r.left)/r.width-.5,y=(e.clientY-r.top)/r.height-.5;if(Math.abs(x)>Math.abs(y)){overlay.style.setProperty('--tx',x>0?'100%':'-100%');overlay.style.setProperty('--ty','0');}else{overlay.style.setProperty('--ty',y>0?'100%':'-100%');overlay.style.setProperty('--tx','0');}}
root.addEventListener('mouseenter',function(e){setFrom(e);requestAnimationFrame(function(){overlay.style.setProperty('--tx','0');overlay.style.setProperty('--ty','0');});});
root.addEventListener('mouseleave',function(e){setFrom(e);});
}
init(document.querySelector('.jouw-container'));