Change element layer order

[devideomakers]

Hi, I’m trying to create an effect, but I’m not sure how. I created this on a page:

(Which you can see in action here: https://devideomakers.nl/bedrijfsfilm-cursus-sneak-preview-les-3/, on the bottom of the page.)

I want to create a similar fading out effect of the text on the top of the page, but the trick I used here, doesn’t work at the top.

What I did is make a half-transparent png in photoshop, and change the top margin of the image in cornerstone to -250. That way the fading white image half covers the text. On the top of the page I tried this, but my fading png doesn’t show up, I guess because the lower layer is always visible ‘above’ the upper layer?
Is there a way to change that?

Or, is there another way I can create a fading out/fading in effect on the text, without using pngs?

Thank you!

[tristup]

Hi @devideomakers,

Thanks for reaching out.
I have checked the given URL and found that you have added a semi-transparent image and set the Top Margin to the -250px which forces the image to override the upper layer where the text is written.
Please replicate the steps to get a similar effect.

Thanks

[devideomakers]

Yes, only it doesn’t work when I want to do it the other way around.
This one works because the semi-transparent image is below the tekst. When I want the semi-transparent image to be above the text (so the text fades in from the top) it doesn’t work.

[tristup]

Hi @devideomakers,

The image used on the other page is having transparency at the top of the image and that is why it shows the faded text when it uplifted. But if you are using the same image in opposite direction, it will not happen as the lower portion of the image is having a solid color. You need to use an image which is having the transparency at the bottom, and also you need to use the Bottom Margin instead of Top Margin.

Hope it helps.
Thanks

[devideomakers]

Yes, I did exactly that. I used an image with transparency at the bottom and used the bottom margin. But it did not work.

I think the problem is the ‘layer order’ of the elements. Which is why I initially asked: is there a way to change the layer order?

[tristup]

Hi @devideomakers,

It will very difficult to recognize the problem without investigating the page you have made through the Page Builder. Still, you can try by setting the Higher value on the Z-index of the Section. The higher value section will overlap the lower value section.

If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[devideomakers]

Yes, that’s it, thank you!

[tristup]

Hi @devideomakers,

Glad that we are able to help you.

Thanks