BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Free widget

Image Comparison Widget for Elementor Free

A before and after slider for two images.

Overview

What Image Comparison does

Image Comparison stacks two images and lets visitors drag a handle to reveal more of one or the other. The divider can run horizontally or vertically, and each side can carry a label. Use it to show the result of a renovation, a photo edit, a redesign or a treatment.

Live demo

See it in action

After
Laptop showing code on a desk, illustrating a headless WordPress setup
Video

See it in Video

Features

What it can do

  • Before and after images with a draggable handle.

  • Horizontal or vertical orientation.

  • Start position from 0 to 100 percent.

  • Before and after labels with custom text.

  • Option to show the labels only on hover.

  • Works with mouse, touch and pen through pointer events.

  • Keyboard control through a hidden range input with a screen reader label.

  • Handle color, arrow color, line width and knob size controls.

Use cases

When to use it

Renovation results

Show a room, garden or driveway before and after the job.

Photo editing

Compare the original photo with the retouched version.

Website redesigns

Put the old and new design of a page side by side.

Cleaning and detailing

Let visitors reveal the cleaned surface by dragging the handle.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Image Comparison from the Bright Addons category onto the page.

  2. In Images, choose the Before Image and the After Image, using two images with the same size and shape.

  3. Pick the Image Size to load.

  4. In Settings, choose the Orientation and set the Start Position (%).

  5. Keep Labels on and edit the Before Label and After Label, or switch on Show Labels on Hover Only.

  6. Open the Style tab to set the handle colors, the Image Radius and the label styles.

FAQ

Questions and answers

Can the slider move up and down?

Yes. Set Orientation to Vertical and the handle moves from top to bottom.

Does it work on phones?

Yes. The handle follows pointer events, so it responds to touch, pen and mouse.

Can it be used with a keyboard?

Yes. The widget includes a visually hidden range input, so the position can be changed with the arrow keys when it has focus.

Can I hide the Before and After labels?

Yes. Switch off Labels, or switch on Show Labels on Hover Only to show them only on hover.

Free forever

Image Comparison is free

It is one of 51 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.