सीएसएस में छवि तुलना के लिए सरल ट्रिक

आइए इनपुट रेंज स्लाइडर बनाएं और उसके नीचे क्लास नाम के साथ दो डिव बनाएं .front, .back क्लास नाम के साथ पैरेंट डिव के अंदर '.img-before-after '. इनलाइन स्टाइल width:50% को .front div
पर असाइन करें

img-before-after, input-range, input-slider-thumb, front, के लिए CSS बनाएं ]पीछे

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

.front और .back divs
दोनों के लिए पृष्ठभूमि छवि जोड़ें।

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

जब हम इनपुट स्लाइडर को खींचते हैं तो हमें '.front' div की चौड़ाई को गतिशील रूप से बढ़ाने/घटाने की आवश्यकता होती है। हमें इनपुट रेंज मान को '.front' div.
की चौड़ाई में जोड़ना होगा।

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

आउटपुट:

नीचे आप देख सकते हैं कि जब हम स्लाइडर रेंज को खींचते हैं तो डेव टूल्स में चौड़ाई कैसे बढ़ रही है और घट रही है।

आप सीएसएस में विभिन्न विविधताओं के साथ प्रयास कर सकते हैं जैसे कि ब्लर, इनवर्ट आदि।

धुंधला

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

उल्टा

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

अंतिम आउटपुट: ग्रेस्केल के साथ

देखने के लिए धन्यवाद...