(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Custom Image Compare with Elementor Free, CSS & Javascript(JS)
Easily make image compare function with Elementor Page builder with fully responsive for all devices. You can use custom icons or image at the division of images.
![Image Compare Divider 2](https://dmmotionarts.com/wp-content/uploads/2024/05/Image-Compare-Divider-2.png)
![](https://dmmotionarts.com/wp-content/uploads/2024/01/anders-jilden-cYrMQA7a3Wc-unsplash-1024x683.jpg)
![](https://dmmotionarts.com/wp-content/uploads/2024/01/pietro-de-grandi-T7K4aEPoGGk-unsplash-1024x683.jpg)
- Add “compare-before” CSS class to left image and “compare-after” to right image. For the divider image or icon, just add the CSS class “dm-range-icon“. If you are using Image, make sure to give it full-width(100%) in advanced tab (Refer video to understand), else the image will shrink at the right edge.
- The range input selector has been given class “imageCompare” in HTML.
- Make sure to give both images full-width(100%) in advanced tab.
- The size of the container is decided by the height of imageCompare::-webkit-slider-thumb, so we use different heights for all devices by using media queries.
- Add the below code in HTML widget at the bottom of the elements as we want the elements to load first then the code to run.
- We have to use appearance:none for imageCompare range input to remove the default styling so that we can style to our requirements.