How to create Image Comparison Slider using CSS ?

Last Updated : 01 Jul, 2022

In this article, we will see how to create an Image Comparison Slider using CSS. The Image Comparison Slider essentially aids in the distinction of two photographs or products. As a result, the user can quickly determine which of the two products or two images in a better way.

Approach: The approach we are using for making this Image Comparison Slider is very basic and it uses pure CSS. To make the slider, we will lay the two photos one over the other first by setting the position of the two images to absolute. Then, we will use the resize property to resize the top image horizontally which will reveal the image beneath and that will help us compare two photos by sliding one over the other.

Properties Used:

Resize-property: It enables us to resize an element and it also defines the way in which that element can be resized.
Position-property: This property is used to set how an element is positioned in a webpage.

Example: This example describes creating the Image comparison slider using the CSS properties.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        body {
            background: rgb(17, 17, 17);
        }
         
        .image-slider {
            margin-left: 3rem;
            position: relative;
            display: inline-block;
            line-height: 0;
        }
         
        .image-slider img {
            user-select: none;
            max-width: 400px;
        }
         
        .image-slider > div {
            position: absolute;
            width: 25px;
            max-width: 100%;
            overflow: hidden;
            resize: horizontal;
        }
         
        .image-slider > div:before {
            content: '';
            display: block;
            width: 13px;
            height: 13px;
            overflow: hidden;
            position: absolute;
            resize: horizontal;
            right: 3px;
            bottom: 3px;
            background-clip: content-box;
            background: linear-gradient(-45deg, black 50%, transparent 0);
            -webkit-filter: drop-shadow(0 0 2px black);
            filter: drop-shadow(0 0 2px black);
        }
    </style>
</head>
 
<body>
    <div style="margin: 3rem; 
                font-family: Roboto, sans-serif">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <h3 style="color: aliceblue">
            CSS Image Comparison Slider
        </h3> 
    </div>
    <div>
        <div class="image-slider">
            <div> 
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220620060056/gfg.jpg"
                     alt="GFG_Image"/> 
            </div> 
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220620060143/gfg1.jpg"
                    alt="GFG_Image"/> 
        </div>
    </div>
</body>
</html>