JSFiddle - React, Tailwind, and code Playground

by rulin shyu

HTML

<div class="image-slider">
    <div class="image-before">
        <img src="http://cdn.images.express.co.uk/img/dynamic/11/590x/Food-health-603127.jpg" alt="">
    </div>
    <div class="image-after with-filter">
        <img src="http://cdn.images.express.co.uk/img/dynamic/11/590x/Food-health-603127.jpg"  alt="">
    </div>
</div>

SCSS

$img-size: 500px;
$button-size: 6px;

img {
    width: $img-size;
}

.image-slider {
    position: relative;
}

.image-before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 2 * $button-size;
    max-width: $img-size;
    overflow: hidden;
    resize: horizontal;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
    }

    &::before {
        top: 0;
        width: 2px;
        background-color: #fff;
    }
    
    &::after {
        width: 0;
        height: 0;
        border: $button-size solid transparent;
        border-right-color: #fff;
        border-bottom-color: #fff;
        cursor: ew-resize;
    }
}

.with-filter {
    filter: contrast(1.2) saturate(1.2);
}