Display before and after images in an attractive way

We are sure you have already seen many examples of before/after images. Don’t know about you, but the first thing we have in mind when we see the “before and after” phrase is fitness training program where people show their bodies before and after a workout program.

If you think about it, most websites use a simple approach to showcase the differences – they take both images and place them one next to another or even one above the other. If you want the same result, you wouldn’t be reading this article because you already know how to do that.

What if we told you there is a visually stunning way to solve this before/after problem and it just in reach of your hand? Well, there is and after a setup you’ll praise the developers because the final result is really, really cool.

Twenty Twenty

PRICE: free

Twenty Twenty

Twenty Twenty is the name of this awesome plugin which you can download for free in WordPress plugin repository.

The plugin will let you place one image over the other and let you play with a slider so you can hide/reveal the image. Please, see the demo and you’ll see what we are talking about.

OK, now when you’re hooked on this little plugin, let’s see how to create this stunning effect. Although it is relatively easy to recreate the demo effect, you will still need to know your way around basic HTML. Let’s go:

  1. Create new post or open the exiting one
  2. Insert two images into the post. If you are working in a Visual Editor, you should see the image one above the other one. If you are working in a Text Editor you should see a code similar to this:
  3. <a href=”image1.jpg”><img src=”http://www.loactionoftheimage.com” width=”700″ height=”200″ /></a>

    <a href=”image2.jpg”><img src=”http://www.loactionoftheimage.com” width=”700″ height=”200″ /></a>

  4. Enter [twentytwenty] tag before the first image
  5. After the second one enter [/twentytwenty] tag
  6. You should end up with something like this in your Text Editor:

    [twentytwenty]
    <a href=”image1.jpg”><img src=”http://www.loactionoftheimage.com/image1.jpg” width=”700″ height=”200″ /></a>

    <a href=”image2.jpg”><img src=”http://www.loactionoftheimage.com/image2.jpg” width=”700″ height=”200″ /></a>
    [/twentytwenty]

  7. Make sure your pictures are the same size to achieve the best results
  8. Preview or publish your post and enjoy your visually stunning before and after pictures

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *