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...
A clonable for creating an Alphabetical glossary
Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.