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.