Simple Image Comparison in CSS-CSS Tutorial-php.cn

Simple Image Comparison in CSS

Mary-Kate Olsen

Release： 2024-10-01 06:13:29

Original

379 people have browsed it

Simple trick for Image Comparison in CSS

Simple Image Comparison in CSS

Lets create input range slider and and two divs below it with class names .front, .back inside parent div with class name '.img-before-after'. Assign inline style width:50% to .front div

<div class="img-before-after">
    <input type="range" class="range" value="50">
    <div class="front" style="width: 50%;"></div>
    <div class="back"></div>
</div>

Copy after login

Create CSS for img-before-after, input-range, input-slider-thumb, front, back

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

Copy after login

Add background image for both .front and .back divs.

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

Copy after login

Lets send .back div behind .front div with z-index and make it grayscale.

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

Copy after login

We need to increase/decrease the width of '.front' div dynamically when we drag the input slider. We have to append the input range value to width of '.front' div.

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

Copy after login

<div class="img-before-after">
   <input type="range" class="range" value="50"
       oninput="this.nextElementSibling.style.width = `${this.value}%`">
   <div class="front" style="width: 50%;"></div>
   <div class="back"></div>
</div>

Copy after login

Output:

Simple Image Comparison in CSS

Below you can watch how the width is increasing and decreasing in dev tools when we drag the slider range.

Simple Image Comparison in CSS

You can try with different variations in CSS like blur, invert etc like below.

blur

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

Copy after login

Simple Image Comparison in CSS

invert

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

Copy after login

Simple Image Comparison in CSS

Final Output: with grayscale

Simple Image Comparison in CSS

Thank you for watching...

The above is the detailed content of Simple Image Comparison in CSS. For more information, please follow other related articles on the PHP Chinese website!