Easy Image Compare

Interactive comparison
Visitors reveal the difference between two images with a smooth divider. Ideal for renovations, edits, beauty results, real estate, and portfolios.

Correct from first paint
Full-size layers use clip-path, so the starting position looks right before JavaScript finishes loading.

No template edits
Publish the module, pick two images, and assign pages.

Horizontal mode
The classic left-to-right reveal for landscape photos and hero sections.

Vertical mode
Slide up and down for tall photos, phone screenshots, and portrait portfolios.

Starting position
Set the initial divider anywhere from 0% to 100%.

Drag
The default feel for demos, case studies, and product pages.

Hover
Move the pointer to explore on desktop portfolios. Touch devices fall back to drag.

Click / tap
Point-and-go control for tablets and mobile-first layouts.

Five ready controls
Match the handle to your brand: circle, diamond, line, arrows, or pill.

True circular handle
The default circle stays round even when the divider is a thin line.

Accent colour
Set handle and divider colours from Appearance without writing CSS.

Theme presets
Switch the overall look of labels and handle in one setting.

Glass and bold options
Use Soft or Glass for modern brand sites, Bold for high-contrast heroes.

Still customisable
Colours, radius, and shadow stay available on every theme.

Auto-play
Gently sweep the divider until someone takes control. Great for hero sections.

Intro peek
Optional short nudge when the module enters the viewport. Off by default for a calm first paint.

Respects reduced motion
Motion features pause when the visitor prefers less animation.

Full keyboard control
Arrow keys move the divider. Home and End jump to the edges.

Configurable step
Set how far each keypress moves, from 1% to 25%.

Screen-friendly labels
Alt text and an accessible range control are included.

Custom captions
Show or hide Before / After labels and place them in corners, top, or bottom.

Optional header
Add an eyebrow, headline, and description above the slider.

Aspect and fit
Auto height from the image, or lock 16:9, 4:3, 1:1, 3:2, or 21:9 with Cover / Contain / Fill.

Contractors and interiors
Show room and kitchen transformations on service pages.

Studios and clinics
Compare edits, treatments, or makeovers without a third-party widget.

Agencies and portfolios
Place several compares on one page; each instance runs on its own.

Joomla 4 / 5 / 6 architecture
Service provider, dispatcher, namespaced helper, and Web Asset Manager versioned assets.

No jQuery dependency
Native JavaScript powers drag, hover, auto-play, and keyboard control.

Multiple instances
Place several compares on one page. Each module keeps its own images, theme, and interaction settings.