Truque simples para comparação de imagens em CSS

Vamos criar o controle deslizante do intervalo de entrada e duas divs abaixo dele com nomes de classe .front, .back dentro da div pai com nome de classe '.img-before-after '. Atribuir estilo embutido width:50% para .front div

Criar CSS para img-before-after, input-range, input-slider-thumb, front, voltar

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;
}

Adicione imagem de fundo para .front e .back divs.

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

Vamos enviar .back div atrás de .front div com z-index e torná-lo em tons de cinza.

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

Precisamos aumentar/diminuir a largura de '.front' div dinamicamente quando arrastamos o controle deslizante de entrada. Temos que anexar o valor do intervalo de entrada à largura de '.front' div.

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

Saída:

Abaixo você pode observar como a largura aumenta e diminui nas ferramentas de desenvolvimento quando arrastamos o intervalo do controle deslizante.

Você pode tentar diferentes variações de CSS, como blur, invert etc., como abaixo.

borrão

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

invertido

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

Resultado final: com escala de cinza

Obrigado por assistir...