Before / After effect

Because no code is involved, the 2 important things for this to work are:

1. Structure / Hierarchy
2. Precise Interaction

The Structure:

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:

1. The image is placed inside a div with a fixed width eg. 800px and height:100% (.fixed-width-div)
2. We will place the fixed width div inside another div with no width, but with overflow:hidden (.overflow-hidden-div)

‍

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.

‍

The Interaction:

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.

1. The .overflow-hidden-div size will start with width:0% and end with width:100%
2. And the .move-icon will start with minus {-X/2} and end with {X/2} on the X axis (where X is the width of our wrapping div).
   ‍
   In my case the wrapping div is 800, so-
   start: -400px
   end: 400px
   ‍
   * I also added -50% on the Y axis because of the way I centered the icon element in the middle of the wrapping div.

‍

Thats should do it :)
Clone away and play with it, for a better understand of what's goin' on...

‍

Enjoy!