Before / After Compare

<!-- Before / After Compare · Bron: CSS Script · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="bac-wrap"><div class="bac-img bac-after"><span class="bac-tag">NA</span></div><div class="bac-img bac-before"><span class="bac-tag">VOOR</span></div><div class="bac-handle"><span class="bac-line"></span><span class="bac-grip">&lsaquo;&rsaquo;</span></div></div>
</div>

/* Before / After Compare · Bron: CSS Script · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.bac-wrap{position:relative;width:340px;max-width:88%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid rgba(10,10,10,.12);user-select:none;font-family:'Switzer',system-ui,sans-serif;touch-action:none}
.bac-img{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-start}
.bac-after{background:linear-gradient(135deg,#0a0a0a,#3a3a3a)}
.bac-before{background:repeating-linear-gradient(45deg,#fff,#fff 12px,#f1f1f1 12px,#f1f1f1 24px);clip-path:inset(0 50% 0 0)}
.bac-tag{margin:12px;font-size:10px;font-weight:700;letter-spacing:.16em;padding:5px 9px;border-radius:6px}
.bac-after .bac-tag{background:rgba(255,255,255,.15);color:#fff}.bac-before .bac-tag{background:#0a0a0a;color:#fff}
.bac-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);z-index:4;cursor:ew-resize}
.bac-line{position:absolute;inset:0;background:#F5480F}
.bac-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid #F5480F;color:#F5480F;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;box-shadow:0 4px 12px rgba(10,10,10,.18)}

// Before / After Compare · Bron: CSS Script · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.bac-wrap')||root;var before=root.querySelector('.bac-before'),handle=root.querySelector('.bac-handle');function set(p){p=Math.max(2,Math.min(98,p));before.style.clipPath='inset(0 '+(100-p)+'% 0 0)';handle.style.left=p+'%';}function fromEvt(e){var r=root.getBoundingClientRect();var x=(e.touches?e.touches[0].clientX:e.clientX)-r.left;set(x/r.width*100);}var drag=false;root.addEventListener('mousedown',function(e){drag=true;fromEvt(e);});window.addEventListener('mousemove',function(e){if(drag)fromEvt(e);});window.addEventListener('mouseup',function(){drag=false;});root.addEventListener('touchstart',function(e){drag=true;fromEvt(e);},{passive:true});window.addEventListener('touchmove',function(e){if(drag){fromEvt(e);}},{passive:true});window.addEventListener('touchend',function(){drag=false;});set(50);
}
init(document.querySelector('.jouw-container'));