How to create this BEFORE/AFTER image view with a slider? Or do u guys think there can be a better way to showcase comparison photos. Optimal for mobile view.
To view the example interaction please visit this and scroll down to ‘STUNNING HDR’ section site
Here is my public share link:
( how to access public share link)
take a look at this forum post, this could be your solution:
After almost 4 hours of not knowing, I searched and searched and made this slider with codepen, then hacked away to make it dynamic.
Showcase page, feel free to clone
Share link: Here
I didn’t write the code, just edited it a little to change the “before” and “after” labels and added a function that allows multiple embeds on the same page. Also works on mobile.
Don’t forget the images need to be the same size. Use the links on the page to see other css t…
That’s the exact same function, its’ using the twenty-twenty script, except the label has been altered slightly
It’s really easy to implement into a webflow site, it’s copying and pasting some code. No code editing is necessary.
I’ve managed to do this effect in Webflow without using any code.
All made of divs and interactions.
Here is my public link. Feel free to clone:
(inspired by Slava Fedosenko)
thats looking awesome and is exactly what I need, but unfortunately your public link is not working.
Could you reshare this, please?
This is really awesome, but does anyone know a way to inject this into perhaps the rich-text editor? I want to use something like this for a portfolio site, where the content is all being called via the CMS.
Has anyone got a step by step video or resource for creating this without using code? I have imported it into webflow but don’t quite get how its set up so am unable to replicate it at this stage.
Thanks very much
Is the cloneable file easily applied to CMS items? I can see this working really well for non CMS items, but im not sure exactly how I’d implement it into my CMS. Any pointers in how to do this? If its overly complicated then I may skip it.
Wow! This is great, and simple. Thanks
Ok, not as easy as first thought. I’m struggling to get the sizing right, i.e. I can’t scale the images down without messing things up.