Простой трюк для сравнения изображений в CSS

Давайте создадим ползунок диапазона ввода и два элемента div под ним с именами классов .front, .back внутри родительского div с именем класса '.img-before-after '. Назначьте встроенный стиль width:50% для .front div

Создайте CSS для img-before-after, input-range, input-slider-thumb, front, назад

body {
    background: #d6d6d6;
}

.img-before-after {
    position: relative;
    width: 900px;
    height: 600px;
}

input[type="range"] {
    background: transparent;
    width: 100%;
    height: 100%;
    margin: 0;
    outline: none;
    position: absolute;
    z-index: 2;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    width: 10px;
    height: 600px;
    cursor: pointer;
    -webkit-appearance: none;
    background: black;
}

Добавьте фоновое изображение для элементов div .front и .back.

.front, .back {
    position: absolute;
    width: 100%;
    height: 600px;
    background: url("https://shorturl.at/kbKhz") no-repeat;
    background-size: cover;
    z-index: 1;
}

Давайте отправим .back div за .front div с z-index и сделаем его оттенками серого.

.back {
    filter: grayscale(1);
    z-index: 0;
}

Нам нужно динамически увеличивать/уменьшать ширину элемента div '.front' при перетаскивании ползунка ввода. Нам нужно добавить значение входного диапазона к ширине div..front'.

oninput="this.nextElementSibling.style.width = `${this.value}%`"

Выход:

Ниже вы можете посмотреть, как ширина увеличивается и уменьшается в инструментах разработчика, когда мы перетаскиваем диапазон ползунка.

Вы можете попробовать различные варианты CSS, например размытие, инвертирование и т. д., как показано ниже.

размытие

.back {
    filter: blur(5px);
    z-index: 0;
}

инвертировать

.back {
    filter: invert(1);
    z-index: 0;
}

Окончательный результат: с оттенками серого

Спасибо за просмотр...