Before and after pictures can be very powerful. Whether showing weight loss, muscle gain, a remodeling project or anything else, showing what something looked like and how you have made it better speaks to people.

One of the easiest ways to create before and after images is with Photoshop. However, this isn't an option for everybody and it can be quite expensive if you don't already own Photoshop.

Instead, you can use an interactive slide to show before and after images in WordPress. This will not only show off your pictures, but will also allow you to do so without compromising the size or quality of the image. Here is how you can display your before and after pictures in a slide in WordPress.
<h2>Using the TwentyTwenty WordPress Plugin</h2>
<img class="alignnone size-full wp-image-7499" src="https://itxdesign.com/wp-content/uploads/2015/01/TwentyTwentyPlugin.png" alt="TwentyTwenty Plugin" width="768" height="237" />

After you have installed and activated the plugin, you can find it in the post edit screen. You will need to upload your before and after pictures into the post before you can use the plugin. Make sure the images have the same dimensions.

Once you have inserted the images into the post, you will need to switch to the "text" editor and locate the image code. Both images will need to be wrapped with the shortcode for the TwentyTwenty plugin, which is [twentytwenty] [/twentytwenty].

<img class="alignnone size-full wp-image-7500" src="https://itxdesign.com/wp-content/uploads/2015/01/ShortCode.png" alt="ShortCode" width="689" height="193" />

Now you will be able to save your changes and you can preview the post to see the images. They will now display next to each other with the word "Before" on one side and the word "After" on the other side.

<img class="alignnone size-full wp-image-7501" src="https://itxdesign.com/wp-content/uploads/2015/01/BeforeAfterMiddle.png" alt="Before After Middle" width="221" height="177" />

As the user slides the middle slide bar across, they will reveal the before or after picture.

<img class="alignnone size-full wp-image-7502" src="https://itxdesign.com/wp-content/uploads/2015/01/Before.png" alt="Before" width="200" height="169" />

<img class="alignnone size-full wp-image-7503" src="https://itxdesign.com/wp-content/uploads/2015/01/After.png" alt="After" width="230" height="179" />

Now you can use this very cool tool to display your before and after pictures on your WordPress website. This plugin will make your site a bit more interactive compared to just two pictures next to each other.