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"></div>
<div class="image after"></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.

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.

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

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 background image and positioning rules to ensure both 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%;
background-image: url("../img/before.jpg");
z-index: 2;
}

div.after {
width: 100%;
background-image: url("../img/after.jpg");
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 pos = event.target.value;

$("div.before").css({width: pos + "%"});
$("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 in this case 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.

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: January 15, 2022
Created: January 09, 2022

Comments

Philippe

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

Reply
 

Josh Rowe

4mo
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

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.