Gradient overlay when scrolling on mobile

Hi there,

I am almost done designing a website in Elementor (Pro) for a client and am in the process of migrating it to the live version. It is a vertical parallax scrolling website, with each section having an image background and a gradient overlay on top of it which gets displayed when mouse-hovering over such section.

The problem arises from the fact that mobile and tablet don’t support hovering states (something I hadn’t thought about at first, alas). I figured out that a possible solution could be to make each of these section “turn on” with the gradient when scrolling down on these devices. Basically, displaying the gradient overlay when each section gets visibile on the screen, and maybe to turn it off when it is past the visible area.

Unfortunately, it seems there’s no such pre-set option in Elementor and I have no clue about how to do this (preferably via CSS). Is anybody able to help me?

Thanks in advance for any help.
F

• This topic was modified 7 years ago by fourfivesix.
• This topic was modified 7 years ago by fourfivesix.