Image animation on scroll hides text

Hello,
I’m quite new to webflow, and I’m currently playing around with some scroll animations.
What I’m trying to do:
I have a portrait image at the top of my page. When loading the page, I want it to cover the whole width of the page, but as I scroll down, I want to scale it so you can see the whole image. In addition to that, I want there to be a text over this image, but I want this to fade away when you scroll down. I have managed to create these two animations seperately, and they seem to work fine when I’m in editing mode.
However, when I preview the page, the image is arranged over the text, so that I cannot see the text at all. Why does this happen, and how can I change the image to be behind the text?

Read only link