Truco simple para comparar imágenes en CSS

Creemos un control deslizante de rango de entrada y dos divs debajo con nombres de clase .front, .back dentro del div principal con nombre de clase '.img-before-after '. Asignar estilo en línea width:50% a .front div

Crear CSS para img-before-after, rango de entrada, pulgar-deslizador de entrada, frontal, atrás

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

Agregar imagen de fondo para las divisiones .front y .back.

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

Enviemos .back div detrás de .front div con z-index y convirtámoslo en escala de grises.

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

Necesitamos aumentar/disminuir el ancho de '.front' div dinámicamente cuando arrastramos el control deslizante de entrada. Tenemos que agregar el valor del rango de entrada al ancho de la división '.front'.

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

Producción:

A continuación puedes ver cómo el ancho aumenta y disminuye en las herramientas de desarrollo cuando arrastramos el rango del control deslizante.

Puedes probar con diferentes variaciones en CSS como desenfocar, invertir, etc., como se muestra a continuación.

difuminar

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

invertir

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

Resultado final: con escala de grises

Gracias por mirar...