Image Cropping advice anyone?

I made some images which scale upon scroll.
I made an image of white which fades over them all when the scroll reaches 100% to accomplish a fade to white effect.

https://preview.webflow.com/preview/davides-initial-project-d01cb3?utm_medium=preview_link&utm_source=designer&utm_content=davides-initial-project-d01cb3&preview=d048d4aada41a13b2c04c15a9a95ff4f&mode=preview

And I made an image that is attempting to cover the outer edges of the scaling up images, in order to frame them , the illusion is to cut off the edges as they scale up. Its not really working well, and Im sure there is a better way to clip or mask the images.

I can’t find a mask tool in this application. I’ve searched for tutorials, and I found a few CSS ones, which require an understanding on how to implement and work with CSS scripts. Which currently i do not. All i want is a step by step or to be pointed to advice on how to mask my images.

The goal is to display only the original size window, and as the image scales, pixels are clipped as they scale behind that area.

Should be rather simple.

Thanks.

Image 7 is just white for the fade to white.
Image 8 is an image of white with a rectangle hole. the white was to cover the outer material.
but I rather remove this and use a mask of some sort as this still doesn’t cover beyond 2400 pixels wide.

Im also having trouble with the read only / published site not scaling with the scrolling effect.
It works well inside webflow preview. And i did read and found so many people have this same problem. The recommended fix it to log out and log back in and republish and this did not resolve the issue for me. Seems likes there is a bug perhaps.

David