Einfacher Trick für den Bildvergleich in CSS

Erstellen wir einen Eingabebereichsschieberegler und zwei Divs darunter mit den Klassennamen .front, .back innerhalb des übergeordneten Divs mit dem Klassennamen „.img-before-after '. Weisen Sie den Inline-Stil width:50% zu .front div
zu

CSS erstellen für img-before-after, input-range, input-slider-thumb, front, zurück

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

Hintergrundbild für die Divs .front und .back hinzufügen.

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

Lass uns .back div hinter .front div mit z-index senden und es in Graustufen umwandeln.

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

Wir müssen die Breite von '.front' div dynamisch vergrößern/verkleinern, wenn wir den Eingabeschieberegler ziehen. Wir müssen den Eingabebereichswert an die Breite von „.front“ div.
anhängen.

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

Ausgabe:

Unten können Sie beobachten, wie sich die Breite in Entwicklungstools vergrößert und verkleinert, wenn wir den Schiebereglerbereich ziehen.

Sie können es mit verschiedenen CSS-Varianten wie Unschärfe, Umkehren usw. wie unten versuchen.

verwischen

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

umkehren

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

Endgültige Ausgabe: mit Graustufen

Vielen Dank fürs Zuschauen...