Astuce simple pour la comparaison d'images en CSS

Créons un curseur de plage d'entrée et deux divs en dessous avec les noms de classe .front, .back à l'intérieur du div parent avec le nom de classe '.img-before-after '. Attribuer le style en ligne width:50% à .front div

Créer du CSS pour img-before-after, input-range, input-slider-thumb, front, dos

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

Ajoutez une image d'arrière-plan pour les divs .front et .back.

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

Envoyons .back div derrière .front div avec z-index et faisons-en des niveaux de gris.

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

Nous devons augmenter/diminuer la largeur du div '.front' de manière dynamique lorsque nous faisons glisser le curseur d'entrée. Nous devons ajouter la valeur de la plage d'entrée à la largeur du div '.front'.

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

Sortir:

Ci-dessous, vous pouvez voir comment la largeur augmente et diminue dans les outils de développement lorsque nous faisons glisser la plage du curseur.

Vous pouvez essayer avec différentes variantes de CSS comme flou, invert etc. comme ci-dessous.

se brouiller

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

inverser

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

Sortie finale : avec niveaux de gris

Merci d'avoir regardé...