TwentyTwenty: Create Difference Between Two Images

TwentyTwenty is a tool that can showcase the difference between two images. The nifty little trick makes it easy to show users precisely what you want them to see.

TwentyTwenty works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left. This allows the image on the right to show through the container.The widget uses jQuery custom movement events to support this slider movement.

The plugin has two dependencies: jQuery and jQuery.event.move, so that actions will work on touch-based devices.

The tool is fairly easy to set up and offers various customization options for display of the images. These options include:

• Color
• Stroke width
• Circle width
• Shawdows
• Triangle color, size and position
• Handle radius
• Overlay and associated colors, labels, padding and spacing
• Label radius

This widget is responsive and works across all devices, doesn’t require images to work properly and works with Zurb Foundation right “out of the box.” (This tool was built by the team at Zurb.)

See the Pen TwentyTwenty by Unheap (@Unheap) on CodePen.