How to mask away an image on scroll

Hello all,

I have begun creating an overlay mask that reveals an image underneath on scroll position, this can be found in my read-only link below, what I am also wanting to do is as this overlay reveals the image beneath, the line drawing on top of the image will also mask away at the exact same scroll position. An example of how this looks can be found here: https://www.akaivyc.com/

Would anybody have resources on how to replicate this effect, is what I have started in the link below the correct first steps or is there a way to achieve this with some sort of clipping?

Thanks in advance.


Here is my site Read-Only: https://preview.webflow.com/preview/hoparacampers?utm_medium=preview_link&utm_source=designer&utm_content=hoparacampers&preview=6b3194cd4a7e22610a06a4220f14c5c7&mode=preview

(how to share your site Read-Only link)

1 Like

On further inspection I see the example website is in fact using a clip property on each div.
Is somebody able to assist on how I would implement similar clipping to the the 3 images I have in this project: Webflow - Hopara Campers

May need to toggle preview on and off again to see the masking I have already implemented.

Thanks in advance.

Hi @weehan,

You should be able to achieve this by using background-image on a div block instead of an image. And setting the background-image property to fixed.

Screen Shot 2020-04-13 at 16.47.40

Another way you can try is to have your text and image to be position: sticky and have a div block come up over it.

Hope this helps!

Ah thank you very much, hadn’t experimented with a div background image as Fixed but I am already seeing the results I want, Simply do what you have suggested with the background-image property to fixed on the top div and then the div/image below it just needs a position of Fixed. Cheers!