Before & After Image Comparison Slider - Oxilab

The Before & After Comparison slider is one of the most engaging features in Image Hover Effects Ultimate. It lets visitors drag a handle left or right to compare two images side by side, perfect for showing transformations, renovations, photo edits, and more. With 4 layout options, it’s flexible enough for almost any use case.

How It Works

Two images are layered on top of each other. A draggable handle sits in the middle. As the visitor drags the handle:

Dragging left: reveals more of the “before” image
Dragging right: reveals more of the “after” image

The effect is immediate, smooth, and works on both desktop (mouse drag) and mobile (touch drag).

Available Layouts

The Comparison effect type includes 4 layout variations:

Layout 1: Classic horizontal drag handle, centered by default
Layout 2: Horizontal with labels (“Before” / “After”) overlaid on each side
Layout 3: Vertical drag handle (drag up/down instead of left/right)
Layout 4: Enhanced handle design with arrows and descriptive labels

Common Use Cases

Photo editing & retouching: Show original vs. edited result
Home renovation & interior design: Before and after renovation photos
Beauty & skincare: Treatment results comparison
Landscaping & gardening: Before and after garden transformations
Website redesign agencies: Old vs. new website screenshots
Fitness & health: Body transformation photos
Cleaning services: Before and after cleaning results
Dental & medical: Treatment outcome comparisons

How to Set Up the Comparison Slider

In the plugin admin, click Add New.
Select Comparison as the effect type.
Choose one of the 4 layouts.
For each comparison item, upload:
- Before image: shown on the left (or top for vertical)
- After image: shown on the right (or bottom for vertical)
- Before label: optional text label (e.g., “Before”)
- After label: optional text label (e.g., “After”)
Set the initial handle position (left, center, or right).
Customize handle style, colors, and sizing.
Save and embed the shortcode.

Customization Options

Handle & Divider

Handle color and size
Divider line color and thickness
Arrow icon style

Labels

Before/After label text
Label font, size, color
Label position (top-left, top-right, etc.)

Initial Position

Set where the handle starts (e.g., 30% from left to emphasize the “after” side)

Sizing

Width and max-width of the slider
Border radius for rounded corners

Pro Tips

📐 Use images of exactly the same dimensions: The before and after images must be the same size for the slider to work properly. If they’re different sizes, one image will be stretched or distorted.
🎯 Set starting position to favor “after”: Starting the handle at 30% (toward the left) immediately shows more of the “after” image, which is usually the more impressive result.
🏷️ Always use labels: Labels make the slider instantly understandable, especially on mobile where dragging behavior isn’t obvious.
📱 Test on mobile: Ensure the drag handle is large enough to easily grab on a touchscreen.

Common Mistakes to Avoid

❌ Mismatched image sizes: This is the #1 issue with comparison sliders. Always crop both images to identical dimensions before uploading.
❌ Misaligned subjects: Make sure the key subject in both images is in the same position. A photo of a room taken from a slightly different angle won’t align properly in the slider.
❌ No labels: Without “Before” and “After” labels, some visitors won’t realize the image is interactive.

Multiple Comparisons on One Page

You can add multiple comparison sliders to the same page using separate shortcodes. Each slider is independent. This works well for showcasing multiple project transformations on a portfolio or results page.