Before & After Image Slider with Zurb’s TwentyTwenty
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).