Twenty20 Image Before-After

plugin banner

Need to highlight the differences between two images? Makes it easy with Twenty20 plugin.

Author:Zayed Baloch (profile at wordpress.org)
WordPress version required:5.9
WordPress version tested:6.7.2
Plugin version:2.0.4
Added to WordPress repository:28-04-2016
Last updated:02-03-2025
Rating, %:80
Rated by:55
Plugin URI:https://wordpress.org/plugins/twenty20/
Total downloads:417 327
Active installs:20 000+
plugin download
Click to start download

Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:

  • Photography portfolios
  • Real estate before/after
  • Renovation projects
  • Design makeovers
  • Product comparisons
  • Restoration work
  • Medical procedures
  • And much more!

Video Tutorial

Live Demo

Check the Live Demo.

Key Features

  • Responsive design – works perfectly on all devices
  • Horizontal and vertical sliding options
  • Customizable slider position and orientation
  • Custom “before” and “after” labels
  • Adjustable image widths and alignments
  • Mouse hover sliding effect
  • Touch-enabled for mobile devices
  • Multiple sliders per page
  • Widget support for sidebars
  • SEO-friendly with proper alt tag support
  • Accessibility compliant image comparisons

Page Builder Support

  • Elementor
  • WPBakery Page Builder (Visual Composer)
  • Flatsome UX Builder
  • Classic Editor

Perfect For

  • Photography before/after edits
  • Home renovation comparisons
  • Web design makeovers
  • Product transformations
  • Restoration projects
  • Beauty transformations
  • Real estate renovations

Usage

Shortcode Example

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.
  • img2 – image ID.
  • offset – range from 0.1 to 1.0.
  • direction – horizontal|vertical.
  • align – none|right|left.
  • width – supports both px and %.
  • before – text for the “before” label.
  • after – text for the “after” label.
  • hover – true or false.
Screenshots
FAQ
ChangeLog