BeforeAfter

Interactive before & after sliders

Create traditional before-and-after comparisons using an intuitive draggable slider. Visitors can move the handle to instantly reveal changes between two images, making improvements, edits, and transformations easy to understand.

This comparison style is ideal for photography edits, image restoration, design revisions, landscaping projects, renovations, and product enhancements where the difference needs to be clearly demonstrated.

Before (1994)

After (2014)

↔

Hover reveal comparisons

Allow visitors to reveal the comparison image simply by hovering over the media area. On touch devices, the same experience automatically adapts to tap-based interaction for a consistent mobile experience.

This creates a clean presentation without visible controls and works particularly well for portfolios, photography showcases, and design demonstrations.

Manufaktura, Łódź, Poland (1994)

Manufaktura, Łódź, Poland (2014)

Hover / press to reveal

Adjustable starting positions

Choose exactly where the comparison slider begins when the page loads. Draw attention to the most important area of a comparison by revealing more or less of either image from the start.

This is particularly useful when a change is concentrated within a specific section of the image and you want visitors to notice it immediately.

Side-by-side comparison mode

Display both images next to each other for direct visual comparison. Visitors can view both versions simultaneously without moving a slider, making it easier to compare layouts, compositions, and larger design changes.

For larger screenshots and detailed imagery, side-by-side mode also supports drag panning, allowing visitors to explore cropped areas that may not fit within the available space.

Original 1994

Artist Impression

⌕

Mobile-friendly touch controls

Every comparison is fully responsive and designed to work across desktop, tablet, and mobile devices. Touch gestures, tap interactions, and responsive layouts ensure visitors can explore comparisons comfortably regardless of screen size.

Whether viewed on a phone or a large desktop monitor, comparisons remain intuitive and easy to use.

Custom before & after labels

Add custom labels to clearly identify each version being compared. Labels can be used to indicate stages of a project, product versions, design concepts, or any other meaningful comparison.

This helps visitors immediately understand what they are looking at without requiring additional explanation elsewhere on the page.

Flexible image positioning

Control how media is displayed using cover or contain modes, along with horizontal and vertical alignment options. Position images exactly where they need to be within the comparison area without editing the source files.

This makes it easier to work with screenshots, product photography, mobile mockups, and images with unusual dimensions.

Various aspect ratios

Choose from a wide range of landscape, square, and portrait aspect ratios to suit different content types. Whether you're comparing widescreen website screenshots or vertical social media graphics, BeforeAfter adapts to the media being presented.

Maintaining consistent aspect ratios across comparisons also helps create a cleaner and more professional-looking website.

Clouds

El Nino

⌕

Perfect for large images, long screenshots, and wide panoramas. This example demonstrates Tandem Panning, which keeps both images moving together at the same speed while you explore the comparison. When one image reaches its boundary, it stops independently while the other continues. Alternatively, Scale Aware Panning adjusts movement speed automatically, ensuring both images stay aligned and reach their boundaries simultaneously, even when their dimensions differ.

Side by Side Slider Hover

Before Bridge

After Bridge

⌕

Perfect for panoramas, website screenshots, and other wide-format content. BeforeAfter automatically enables Horizontal Panning when images extend beyond the available viewing area, allowing visitors to explore details while maintaining an accurate comparison. The magnifying glass button provides a quick toggle between Fit mode for viewing the entire image and Cover mode for a closer, more detailed inspection using panning.

Before the storm

The Storm

↔

Videos in slide reveal mode

Videos in side-by-side mode, with scale aware tandem panning. Clicking the zoom button toggles the view between cover and fit modes.

Animated GIF comparisons

Show animated content side-by-side using GIF comparisons. Perfect for demonstrating workflows, software interactions, interface changes, animations, and visual effects that require movement to be fully understood.

GIF comparisons provide a lightweight alternative to video while still allowing visitors to see dynamic changes.

Advanced website loading controls

Optimise webpage comparisons using configurable loading strategies. Choose whether pages load immediately, load when approaching the viewport, or wait until the visitor requests them.

These controls help balance performance and user experience, particularly when a page contains multiple website comparisons.

Iframe interaction modes

Control exactly how visitors interact with embedded webpages. Allow full interaction, block clicks while preserving scrolling, provide dedicated scrolling safe areas, or completely disable interaction.

This flexibility allows you to create the ideal viewing experience while preventing visitors from accidentally navigating away from your content.

Comparison sets

Create powerful comparison experiences using two, three, or four versions of a project from a single interface. Rather than showing only a before and after state, Comparison Sets allow visitors to explore an entire progression of changes.

This makes them ideal for renovations, design revisions, development projects, AI image generation workflows, and any situation where multiple stages tell a more complete story.

Automatic pair generation

Simply select your images and BeforeAfter automatically generates all possible comparison combinations. Instead of manually building every comparison, the plugin handles the setup for you.

This dramatically reduces administration time when working with projects that contain multiple stages or versions.

Multiple selector styles

Allow visitors to switch between comparison pairs using dropdown menus, compact buttons, or thumbnail selectors. Different selector styles make it easier to adapt the comparison experience to different types of content and page layouts.

Whether you're presenting a simple two-stage comparison or a complex project progression, visitors can navigate comparisons effortlessly.

Synced drag panning

When images are displayed using cover/crop mode, portions of the media may extend beyond the visible viewing area. Synced Drag Panning option allows visitors to drag one image to explore those hidden areas while all other images move to the matching position automatically.

This makes it easy to compare different versions of large screenshots, photographs, and designs without repeatedly repositioning every image. Visitors can focus on the content itself rather than managing the comparison interface.

Guided progression controls

Add previous, next, play, and pause controls to automatically guide visitors through project stages. Comparisons can progress manually or automatically, helping tell a visual story rather than requiring visitors to discover each stage themselves.

This is particularly effective for project timelines, renovations, design revisions, and transformation showcases.

Zoom & synced pan

Zoom into important details while keeping every comparison perfectly aligned. Once zoomed, panning across one image automatically updates the comparison view so visitors can inspect the same area across every version.

This is ideal for website redesigns, photography retouching, technical illustrations, UI design reviews, and any comparison where small visual differences need close examination.

Adjustable playback speed

Control how quickly progression-based comparisons move between stages. Faster transitions work well for quick demonstrations, while slower transitions allow visitors to absorb more detail.

This gives you complete control over how your comparison story is presented.