Before and After Images using TwentyTwenty

See the Pen Before and After Images using TwentyTwenty by Brandon Himpfen (@brandonhimpfen) on CodePen.

In this tutorial I’m going to show you how to create before and after images using TwentyTwenty. TwentyTwenty uses CSS and JavaScript to showcase the visual differences between two images, also known as before and after images.

First download TwentyTwenty and upload it to your server, CDN or other file hosting service. You will also need jQuery if your website does not already have it.

Next add TwentyTwenty to your site using the following HTML code:

<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />

Make sure to change the path to where jQuery and TwentyTwenty files are located.

Once you’ve added TwentyTwenty to your website, we can add the before and after image using the following code:

Make sure you change before.png and after.png to the URL of images.

Lastly we will call TwentyTwenty using a bit of JavaScript:

Make sure the <div> ID matching the ID in the above JavaScript code. By default, we made it container1.

And you’re done!