Pure CSS Image Comparison Slider

A comparison slider is used to compare two images to highlight before and after effect. Users can view changes in real-time by sliding the image with the mouse pointer or swipe. An image comparison slider can be created using JavaScript or only HTML5 and CSS techniques. But, in this tutorial, we’ll build a pure CSS image comparison slider.

Before moving forward, I’ll recommend you check out the demo page of the comparison slider. OK! now let’s know how it’s working without any JavaScript/jQuery slider plugin. Unlike other pure CSS image slider, it’s not using any special HTML element except div and imgtags. So, in order to create a sliding function, we’ll use CSS resize property.

Actually, we are going to build an image container that will contain two images with an absolute position. The second image can be resized/slide over the first image using the mouse pointer or swipe. As a result, the difference between both images can be compared easily.  So, let’s get started with HTML structure for comparison slider.

HTML Structure for Image Comparison Slider

The HTML for comparison slider is simple and straightforward. Just create a div element with the class name “image-slider” and put both images inside it. Wrap the first image into another div element. So, the complete HTML structure for comparison image slider looks like the following code:

<div class="image-slider">
<div><img src="img/face-before.jpg"></div>
<img src="img/face-after.jpg">
</div>

You are limited to use this HTML structure as it is described. However, you can add other HTML elements/text after the second image. But, you need to make your text container absolute.

The CSS Styles

Now its time to style the image comparison slider using pure CSS. To do so, define the relative position for image-slider and display it as inline-block. Here, the line-height property is optional. If you added some text inside this container, don’t use its value as 0.

.image-slider {
  position: relative;
  display: inline-block;
  line-height: 0;
}

After that, make the first image resizeable and set it over the second image. We’ll set its position to absolute and overflow hidden. Similarly, we’ll use resize horizontal property. If you want to make a vertical comparison slider then set the “vertical” value for resizing property.

.image-slider > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
}

For cross-browser resizing support, we’ll also define CSS styles for resizer using the pseudo selector. If you want to customize this resizer/slider, you can set the custom values for height and width. Likewise, you can also define custom background color for it.

.image-slider > div:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  padding: 5px;
  background: linear-gradient(-45deg, white 50%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

Now, we’ll define the maximum width for slider images. If you want to increase/decrease the size of the image comparison slider, update the max-width of img selector. To avoid selection while sliding/resizing image containers, we’ll use CSS user-select none property. Beside this, you can also define some extra styles for your slider image according to your needs.

.image-slider img {
  user-select: none;
  max-width: 400px;
}

That’s all! I hope you like this image comparison slider, you can comment below if you need any further help to complete your image comparison project.