Skip to Content

How to Create A Before & After Image Slider with CSS

A before and after image slider is a perfect CSS solution for showing differences or variations of a person, place, or thing that has made a change. For example, you may be an interior designer or home renovation and remodeling expert and want to illustrate a living room before and after a remodel. This can be accomplished easily and effectively with a professional-looking image slider.

In this tutorial, we'll walk through creating a before and after image slider using CSS along with some HTML and jQuery. The end result will look like this:

The HTML

First, we'll need to create our HTML elements so we have something visual to look at:

<div class="container">
<div class="image before" style="background-image:url('img/before.jpg');"></div>
<div class="image after" style="background-image:url('img/after.jpg');"></div>

<input type="range" class="slider" min="1" max="100" value="50" />
<div class="slider-button"></div>
</div>

To start, we have our container element, which is the parent to all other elements within this example. As its class name suggests, this helps keep everything contained within itself, primarily for element positioning reasons.

The before and after div tags are placeholders for the before and after images that will be assigned in our CSS code coming up shortly.  Each has a specified background-image CSS rule so you can specify a unique URL for each image.

Then we have a range input element and a slider-button div element that controls the position of our divider. The slider starts halfway through to show that there is a comparison being made to the user.

You can repeat the above HTML code, copying the container element as many times as you'd like to display multiple before and after image sliders on your web page.

The Parent Container CSS

Now that we've covered the HTML elements, let's get into the CSS code for each of these elements.

The container parent element sets a width and height rule, as well as a relative positioning rule to ensure that all the child elements within are contained properly:

div.container {
width: 800px;
height: 530px;
position: relative;
margin: 20px;
}

The Before & After Image Container CSS

Next, we have the before and after images, each with the class name image so we don't have to assign the same CSS rules twice. We're setting the image heights to the full height of the parent element and positioning rules for the background images to ensure both the images are positioned in the same spot and cover the entirety of the image slider.

Then, we drill down into each of the before and after images with their own class names to make sure the before image only stretches halfway across the parent element to the slider divider, and the after image stretches the full width of the container. The before image is stacked on top of the after image by using a larger z-index value to ensure the image is always visible up to the slider's divider position:

div.image {
height: 100%;
background-repeat: no-repeat;
background-position: top left;
background-size: cover;
position: absolute;
top: 0px;
left: 0px;
}

div.before {
width: 50%;
z-index: 2;
}

div.after {
width: 100%;
z-index: 1;
}

The Image Slider CSS

Now we want the user to be able to move the image slider by clicking and dragging anywhere within the container element. This requires altering the slider itself so it spans the full width and height of the container and removing its default styling options to create a UI that makes more sense for this example.

We set the appearance rule to none so the element itself doesn't get selected and highlighted when dragging the slider. And some additional transitions for a smother slide animation.

We then finish it off by creating a bar straight down the middle of the slider element by modifying the CSS rules for the ::-moz-range-thumb and ::-webkit-slider-thumb pseudoclasses. This bar will act as our divider between the before and after image, providing a clear comparison between the two images:

input.slider {
width: 100%;
height: 100%;
outline: none;
background-color: transparent;
position: absolute;
margin: 0px;
z-index: 3;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-webkit-transition: 0.25s all ease-in-out;
z-index: 4;
}

input.slider::-moz-range-thumb {
width: 6px;
height: 600px;
background-color: white;
cursor: pointer;
}

input.slider::-webkit-slider-thumb {
width: 6px;
height: 530px;
background-color: white;
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}

The Slider Button CSS

And, finally, we have the round slider button that appears in the center of the image slider container. Most of the CSS here is sizing and positioning of the button itself, then we have the :before and :after pseudo-classes where we create and position our arrows using Unicode characters:

div.slider-button {
width: 30px;
height: 30px;
border-radius: 50%;
-moz-broder-radius: 50%;
-webkit-border-radius: 50%;
background-color: white;
position: absolute;
top: calc(50% - 18px);
left: calc(50% - 18px);
cursor: pointer;
z-index: 3;
}

div.slider-button:before {
color: #555;
position: absolute;
top: 3px;
left: 0px;
content: "\2B9C";
}

div.slider-button:after {
color: #555;
position: absolute;
top: 3px;
right: 0px;
content: "\2B9E";
}

The jQuery That Makes the Slider Function

The last piece we have is the jQuery to make our slider function when the user clicks and drags their mouse across it:

$("input.slider").on("input change", function(event) {
var element = $(this).parents("div.container");
var pos = event.target.value;

element.find("div.before").css({width: pos + "%"});
element.find("div.slider-button").css({left: "calc(" + pos + "% - 18px)"});
});

Here, we're assigning multiple events, input and change to our slider. When the value is changed by dragging the slider, we grab its value from event.target.value, which is a value between 1 and 100 that we defined with our min and max attributes of our slider.

That value is then used to determine the width of the before image and the position of the slider button and divider by calculating a percentage.

Assigning the container element to the local element variable ensures that we're only updating the position of the active slider and not other sliders that may exist on the page.

Conclusion

As you can see, there isn't much coding required to get an effective result for a CSS before and after image slider. The best thing is this will also work in all modern browsers, including mobile devices.

You can view the full example in the GitHub repository.

Last Updated: August 20, 2022
Created: January 09, 2022

Comments

Philippe

7mo
Hello,
Nice and easy, thank you.
Is there a possibility to have an option for horizontal bar ?
Thanks

Reply
 

Josh Rowe

7mo
Hey, Philippe. Yes! You would just need to alter the CSS rules a bit to work off of a different axis. For example, instead of defining rules for width and left, you could change to height and top, etc. So the rules for div.before would have a height of 50% and div.after would have a height of 100%. Then you could rotate the slider handle 90 degrees so the handle arrows point up and down instead of left and right. I hope that helps!

Reply

Chris Daniels

2mo
Hi there, Thanks for a great tutorial.
Is there a possibility to have more before-after images on the same web page?
Thanks

Reply
 

Josh Rowe

2mo
Hey, Chris. I'm glad the tutorial helped you! I only chose one example to keep the article quick and to the point. However, you can down the code from the GitHub repository at https://github.com/orangeable/css-before-and-after-image-slider and use any images you'd like. Enjoy!

Reply
 

Chris

2mo
Thanks Josh for your reply.
Sorry I don't think my query was clear enough. Yes I understand that I can use my own images and I've downloaded the code. All good there.
What I meant was: Let's say I want 5 before - after images on the same web page under each other: How do I do that.
Cheers
Chris

Reply
 

Josh Rowe

2mo
Ah, I see what you mean now. So, you could copy the container element HTML code as many times as you want. You'll just need to assign an additional class to each container element or you can use inline CSS to set the background image of the before and after div elements.
You'll also need to update the jQuery code to this:var element = $(this).parents("div.container");
var pos = event.target.value;
element.find("div.before").css({width: pos + "%"});
element.find("div.slider-button").css({left: "calc(" + pos + "% - 18px)"});
Thanks for the heads up! I'll update the article and repository to work with multiple sliders!

Reply

Josh Rowe

1mo
I've updated this tutorial and the GitHub repository to include the ability to add multiple before and after image sliders to a single web page. Make sure to check it out and grab the latest code!

Reply

Add A Comment

Comment Etiquette: Wrap code in a <code> and </code>. Please keep comments on-topic, do not post spam, keep the conversation constructive, and be nice to each other.