Image Comparison
A picture is worth a thousand words, but a comparison is priceless. The Image Comparison element lets you showcase changes, upgrades, or differences with an interactive slider. Place two images side by side and let visitors drag a handle to reveal the “after” over the “before.” Perfect for renovations, fitness results, product makeovers, or any visual story of progress. With full control over the handle, labels, and overlay, you can create a compelling, professional comparison that engages and convinces in seconds.
Interactive Drag-and-Reveal Slider
The magic is in the interaction. Upload your “Before” and “After” images, then set the initial Visible Ratio – like starting at 50% to show both equally. Users can click and drag the Handle to slide between the two images, giving them direct control over the reveal. Choose the Orientation (horizontal or vertical) and set the interaction to Mouse Drag or touch swipe. It’s an immersive way to demonstrate change.
- Intuitive Control: Users drag a handle to interactively compare the two images.
- Flexible Orientation: Create horizontal (left/right) or vertical (up/down) comparison sliders.
- Adjustable Starting Point: Set the initial split (e.g., 30% before, 70% after) to highlight the result.
Customizable Overlay & Clear Labels
Make sure viewers understand what they’re seeing. Enable the Overlay to display “Before” and “After” labels right on the images. Fully customize these labels: change the text, typography, colors, and background. You can even use a gradient for the overlay. Style the Normal and Hover states separately, and control the overlay’s padding, margins, and borders for a polished, integrated look.
- Custom Label Text: Change “Before/After” to anything like “Old/New,” “Original/Enhanced,” etc.
- Stylish Overlay Background: Use solid colors, gradients, or even images for the label backgrounds.
- Clear Visual Context: Ensure viewers never wonder which image is which.
Professional Handle & Container Styling
The slider should look like part of your design, not a generic tool. Fully customize the Handle: change its bar color and size, style the drag box with icons, colors, and backgrounds, and add Box Shadow and Border Radius. Then, style the main container (Layout Style) with borders, padding, and shadows. Every element – from the handle to the labels to the container – can be tailored to your brand.
- Drag Handle Design: Style the slider bar and the draggable box with icons, colors, and hover effects.
- Container Polish: Add borders, shadows, and spacing to the widget so it fits seamlessly into your layout.
- Responsive Touch: The handle is designed to be easy to grab and drag on both desktop and touchscreen devices.
Frequently Asked Questions For Image Comparison
Can I use this to compare more than two images?
No, this element is specifically designed for a direct, side-by-side comparison of two images. It’s perfect for before/after scenarios. To showcase multiple images or states, consider using a Gallery Slider or Image Carousel instead.
How does this work on mobile phones?
Perfectly! The slider is fully touch-friendly. Users can swipe left/right (or up/down) to move the handle. The element is responsive, and you can adjust settings like label size and handle size for mobile in Elementor’s responsive editing mode.
Can I change the text on the labels?
Absolutely. You can change the default “Before” and “After” text to anything you want directly in the Content settings. This lets you customize the labels for any scenario, like “Day/Night,” “Without/With,” or “Product A/Product B.”
What’s the best use for the vertical orientation?
Vertical sliders are great for comparing tall images, like full-length portraits, building facades, or any “top vs. bottom” transformation. It’s also a unique visual choice that can make your comparison stand out on a page of horizontal content.
Will using two high-resolution images slow down my page?
It can, if the images are very large. Use the Image Resolution setting wisely (e.g., “Large” instead of ‘Full’) and always optimize your images for the web before uploading. The element itself is lightweight, but image file size is the main factor for performance.
Can I start the slider with the "After" image mostly hidden?
Yes, use the Visible Ratio setting. If you set it to 90%, the “Before” image will take up 90% of the space, hiding most of the “After” image until the user drags the handle. This is great for creating a surprise reveal.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
