Twenty20 Image Before-After

Twenty20 is the WordPress plugin of TwentyTwenty script that developed by Zurb team.

This sparked a few new ideas on how to do something similar for our own needs. It had to swipe between two images to show “before” and “after”. Most of all, it had to be responsive.

Live Demo

Features

• Responsive and functional on all devices.
• Doesn’t require images to work.
• Easy and clean user interface
• Add before-after on widgets.
• Support popular page builders.
• Support WP Image alt as image alt and title.

Support Page Builders

• WP Bakery Visual Composer.
• Elementor Page Builder.
• UX Builder by UXThemes.

Quick Example

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]

Shortcode Parameters

• img1 – image id.
• img1 – image id.
• offset – 0.1 to 1.0.
• direction – horizontal|vertical.
• align – none|right|left.
• width – Support both px and %.
• before – Text.
• after – Text.
• hover – true or false.

Video Demo