Archived topic
GenerateBlocks - Parallax - Pseudo Element
5 replies · Started by Frans on December 5, 2020
I an working to replace GPP Sections by GenerateBlocks. I managed to implement parallax with your help.
However, in a GB container, when I change the opacity of the background image, the Selector switches to "pseudo element". Then, the parallax does not work any more. If I return to "element", it is working again.
Is there a solution ? In the script ?
Thanks !
Frans
Hi there,
Pseudo elements are not standard DOM elements so they cannot be selected and manipulated in the same way using JS.
To workaround make sure you have the latest version of GB, that is version 1.2.
Then create a Gradient for the container, you can set both colors to white with x Opacity. Then set that as a Pseudo Element that will sit in front of the background image.
Leave the background image as an element.
Thanks ! The parallax works again !
In my case, the background gradient also sits in front of a head (text) that is in front of the background image. Is it possible to get text (head, paragraph) in front of the background image and the background gradient (as pseudo element) ?
If I add a color to the background gradient, the color of the text cannot become white, because of the background gradient that is in front of it.
Thanks !
Frans
Select the Container > Spacing --> And increase the Inner Z-Index to 1
Great ! It is similar as my section now !
Thanks !
Frans
Glad to hear that
