Looking for a template or a guide for creating a particular design

I’m looking for a template or tutorial for the design used in “Triggers and Animations” video. More specifically, it’s the way the Text is placed behind the PNG image of the mountain, I’m guessing it would be using z-index but having a bit of creative block and would love a guide to help me replicate this style for a couple of personal projects I’m working on.

I’m new to the community, and it’s my first forum post so apologies if it’s in the wrong area!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey there Matt, the way I would build this design is by switching the section’s position to “Relative” and then set the mountain image PNG to “Absolute” - this way you can access the Z index and the image can span the full width and height without disrupting the text element’s position. Then add two Headers for the two text elements and set both of them to “Relative”. You can then access the “Z” index for all three elements because they are set to “Absolute” and “Relative”. Set the header you want to go behind the image to a “Z” index of 1, the image to a “Z” index of 2, and the second header to “Z-3”. Then of course you can create the desired interaction by using a “Scroll while in view” animation triggering the text elements to move left and right respectively.\

Hope that helps!