BeforeAfter

Show the Difference Instantly

BeforeAfter makes it effortless to create interactive comparison showcases using images, videos, GIFs, and even live websites.

From photo edits and product transformations to full website redesigns and animated showcases, BeforeAfter helps visitors instantly understand what changed — without cluttered layouts or complicated builders.

Designed to feel lightweight, modern, and smooth on every device.

Works beautifully with almost any WordPress theme.

Interactive Comparisons

Drag, hover, slide, or stack your content to instantly reveal the difference.

Media Beyond Images

Use images in Free, then unlock video, GIF, mixed media, and live website comparisons in Pro.

Mobile Friendly

Responsive layouts automatically adapt, stack, and stay easy to use on smaller screens.

Lightweight & Fast

Vanilla JavaScript, conditional asset loading, and no external CDN dependencies.

Built for Modern Showcases

BeforeAfter gives you multiple ways to present visual changes without overwhelming your visitors.

Whether you want a simple image reveal slider, a side-by-side product comparison, or a full interactive website transformation showcase, the plugin stays fast, clean, and easy to use.

The interface is intentionally straightforward so non-technical users can create polished comparisons in minutes.

Multiple Ways to Reveal the Difference

Different projects need different presentation styles. BeforeAfter includes multiple comparison modes so you can choose the experience that fits your content best.

Slide Reveal

The classic draggable comparison experience. Perfect for edits, restorations, transformations, and visual upgrades. Below we set the handle to start at 75%, 16:9 aspect ratio, cover/crop image, and custom Before and After overlay labels.

Before (1994)

After (2014)

↔

Hover Reveal

Let visitors reveal changes simply by hovering. Ideal for modern portfolio presentations and quick comparisons. Below we set 21:9 aspect ratio, cover/crop image, and custom Before and After overlay labels.

Manufaktura, Łódź, Poland (1994)

Manufaktura, Łódź, Poland (2014)

Hover to reveal

Side-by-Side

Display both versions together in a clean responsive layout. Great for detailed product or design reviews. Below we set 3:1 aspect ratio, cover/crop image, and custom Before and After overlay labels.

Original 1994

Artist Impression

Compare video media too!

Yes, BeforeAfter also handles video media too! Great for before and after comparisons needing real motion. Works in Slide reveal, Hover Reveal, and Side-by-Side modes too. Below we set the handle to start at 50%, 16:9 aspect ratio, cover/crop image, and custom Before and After overlay labels.

Before the storm

The Storm

↔

Start Free. Upgrade When You Want More.

The free version is intentionally powerful and fully usable on real websites.

Upgrade to Pro when you want advanced media support, live website showcases, and premium presentation capabilities.

Free

Start with the essentials

Create clean, responsive before-and-after comparisons using images, labels, and flexible display modes.

• Slide Reveal, Hover Reveal, and Side-by-Side modes
• Drag-to-reveal comparison slider
• Keyboard accessible controls
• Responsive mobile layouts
• Automatic stacking on smaller screens
• Before and After labels
• Adjustable aspect ratios
• Cover and contain object-fit controls
• WordPress Media Library support
• External image URL support
• Shortcode support
• Lightweight vanilla JavaScript
• No external CDN dependencies
• Works with most WordPress themes

Pro

Unlock the wow factor

Go beyond static image comparisons with video, GIFs, live websites, and premium showcase experiences.

• Everything in Free
• Video comparison support
• Animated GIF comparison support
• Image ↔ Video, Image ↔ GIF, Video ↔ Video, and GIF ↔ Video comparisons
• Autoplay looping video support
• Video poster / cover image support
• External video URL support
• Live website iframe comparisons
• URL-to-URL website comparisons
• Scaled iframe rendering
• Website redesign showcase capability
• Interactive demo and presentation capability
• Animated background and BGFX demonstration support
• Premium portfolio and agency showcase tools

Perfect for Website Redesign Reveals

BeforeAfter Pro can compare live websites directly inside interactive comparison layouts.

Show redesigns, UI improvements, landing page upgrades, animation changes, or complete visual overhauls without relying on static screenshots.

This creates a far more engaging experience for agencies, freelancers, designers, and product creators.

Below is an example of how we showcased the BGFX Plugin

Before

After

Lightweight by Design

BeforeAfter was built to feel smooth and modern without adding unnecessary overhead to your site.

The plugin uses lightweight vanilla JavaScript, conditional asset loading, accessible controls, and clean responsive layouts to keep things fast and reliable.

No external CDN dependencies. No bloated page builder requirement. Just focused comparison tools that work.