Masked Image Reveal

hey guys

I am trying to achieve the reveal of an image through a mask like here:

Shared with CloudApp

at a first glance, it seems like two DIV blocks with two pictures are expanding from the middle, one to the top. another to the bottom.

but if you take a closer look at it a few times and try to catch what is really going on with the images there, you will notice that the image is not attached to the position of the DIV block.

it seems like it has some steady position on the background (it is just shrinking in its size a bit) but it is really being revealed by the moving position of the DIV block.

do you know how I could achieve this effect? I don’t think that Overlay would work because an overlaid picture must be inside a DIV block to make it happen. but if I put it inside the DIV block then the picture would move with the DIV block together. and in this case it seems like the pictures are outside the DIV blocks.

thanks


Here is my public share link: https://preview.webflow.com/preview/2images?utm_medium=preview_link&utm_source=designer&utm_content=2images&preview=a65815eab996eed725c1ab151c573198&mode=preview

(how to access public share link)