Before & After Images

Clone Project

View Article

*Update January 2023
We made fixes to all mobile and safari browsers and you should no longer experience issues with those. Thanks!

Overview‍
Building an image comparison section in Webflow doesn't need to be difficult, and it shouldn't cost you time or money...

Here's a simple solution, we built ontop of the awesome js work from @pehaa.

We've tried to make this really accessible for all users, so what's important here is <Image Wrapper> and the two images inside of it, namely <Image One> and of course <Image Two>. We recommend you size your two images the same, although it will work regardless.

Use <Image Wrapper> to set your maximum width, and copy the code from page settings. That's it, when you publish the page the magic will happen.

Learn more about the sliders JS from @pehaa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.