How to implement the following effect?

Question

css

Hello! Perhaps someone knows how to implement the effect shown in the picture. those. dragging the arrow changes the picture. like "before and after". Perhaps there are some libraries?

ps These are two pictures. Before - the first, after - the second.

Answer 1

The easiest way is to overlay two blocks on top of each other with pictures before and after, and resize the top block when moving

Answer 2

you can also set 2 blocks equal width and change their width by dragging..

Answer 3

this effect cannot be done with only one picture. you need either a ready-made processed one, or some kind of black-and-white mask, by which you can then calculate the pixels that need to be highlighted. but the first option is better.
I'm not talking about the width correctly here. here you need to make a mask, and not resize the pictures.