Before & After Images

Free Component by Flowbase

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

View the guide on

Was it helpful? Please consider supporting us on socials, just tweeting @ us with a thanks helps more than you'll know 🤙