<body style='--val: 50'>
<img src='https://images.unsplash.com/photo-1722630810924-5cd9fbf45de7?w=2400' alt='Image showing a bicycle parked against a brown wall with a circular window. There is a slider control on top allowing to drag a separator between the blurry version after the slider thumb and the original before the slider thumb.'/>
<input type='range' aria-label='control allowing to drag the separator between the processed image version and the original.'/>
</body>
View Compiled
$thumb-w: 1em;
$thumb-x: -.5*$thumb-w;
@mixin thumb($f: 0) {
@if $f > 0 {
border: none;
border-radius: 0
}
width: $thumb-w; height: 100%;
background: #fff9;
cursor: ew-resize
}
* { margin: 0 }
html, body {
display: grid;
grid-template: 100%/ 100%;
height: 100%
}
body {
overflow: hidden;
&::after {
clip-path: inset(0 0 0 calc(var(--val)*1%));
backdrop-filter: blur(8px);
content: ''
}
}
img, [type='range'], body::after { grid-area: 1/ 1 }
img {
width: 100%; height: 100%;
object-fit: cover
}
[type='range'] {
&, &::-webkit-slider-thumb { appearance: none }
z-index: 1;
margin: 0 $thumb-x;
background: #0000;
&::-webkit-slider-runnable-track { height: 100% }
&::-webkit-slider-thumb { @include thumb }
&::-moz-range-thumb { @include thumb(1) }
}
View Compiled
addEventListener('input', e => {
document.body.style.setProperty('--val', +e.target.value)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.