خدعة بسيطة لمقارنة الصور في CSS

لننشئ شريط تمرير نطاق الإدخال واثنين من divs أسفله بأسماء الفئات .front، .back داخل div الأصلي مع اسم الفئة '.img-before-after '. تعيين النمط المضمّن width:50% إلى .front div

إنشاء CSS لـ img-before-after، نطاق الإدخال، input-slider-thumb، front، خلف

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 div.

.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}%`"

الإخراج:

يمكنك أدناه مشاهدة كيفية زيادة العرض وتناقصه في أدوات التطوير عندما نقوم بسحب نطاق شريط التمرير.

يمكنك تجربة أشكال مختلفة في CSS مثل blur، invert وما إلى ذلك كما هو موضح أدناه.

طمس

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

عكس

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

الإخراج النهائي: بتدرج الرمادي

شكرا على المشاهدة...