Because no code is involved, the 2 important things for this to work are:
The "before image" (the one we place at the back) can be an image element or a background image of any DIV (.back-img-wrap)
The "after image" is a bit more complex. We need to make sure:
The 2 images wrappers needs to fit one on top of the other in the same div, so we will give both (.back-img-wrap & .overflow-hidden-div) position:absolute and the div that wraps all together (.ba-wrap) needs any kind of position other than static (so its direct children divs will conform to its position).
A nice extra could be an icon to indicate the left/right movement. Position it in the center of the wrapping div.
Now comes the interaction... which we apply to the wrapping div, so it is our 'trigger'.
We will use 'While mouse move over element' and add actions only on the X axis.
Thats should do it :)
Clone away and play with it, for a better understand of what's goin' on...
When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.
A round scroll indicator mad with Webflow elements and interactions
Pass input fields parameters and add them to the destination URL.
A fixed background image that is revealed by mouse hover all over the section