The trick to create a before-after image effect using pure CSS is to add a div element inside another div element and adding background images for both. Once with effect using CSS filter property and one without.
This is what HTML will look like:
<div class="box">
<div></div>
</div>
Let’s add a background-image for the outer div.
Let’s add another background image in inner div with filter property value as grayscale(90%). You can adjust the grayscale or use another value such as contrast or blur.
As you can see the inner div is on top now and you can’t see the outer div.
To make the inner div (upper layer) resizable on top of the outer div (lower layer), we need to set resize property to horizontal and overflow property to auto.
Adding the max-width property will stop the inner div (upper layer) going out of the outer div (lower layer).
background-image examples filter horizontally images sass style
