Skip to Main Content

Before & After Image Slider with Zurb’s TwentyTwenty

Posted on 8.01.2013

The good folks at Zurb have done it again with an interesting jQuery plugin that makes it possible to highlight the visual differences between two images.

Zurb’s TwentyTwenty tool works by stacking two images on top of each other. As a user manually moves a slider across the image with their mouse, TwentyTwenty uses the CSS clip property to trim the image on the left, allowing the image on the right to show through the container. It's a great little solution for providing the "before and after" experience.

The plugin, released under the MIT license, is responsive and works across all devices (even mobile, on which users can slide between images with a swipe of their finger).

EDITORS NOTE: The image below is a screenshot (i.e. it's not interactive). 

WebsiteMagazineMiniLogo

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •    
      

    The Ultimate Guide to Personalization

    Kibo