Grid – Div Blocks over each other

Hey there!

Since I want the invert filter only to affect the image but not the text I have to separate them into two different elements. If I do this they stuck under each other but the text is not overlapping the image. This may be a simple fix but does someone have any idea to do that? I tried it with the “position” options but I couldn’t figure out how.

Link to read-only:

https://preview.webflow.com/preview/zeitgeist-599dd0?utm_medium=preview_link&utm_source=designer&utm_content=zeitgeist-599dd0&preview=a9674b58d8a0a5ea70d8c1502154a03d&mode=preview

Would be very nice of you, thanks in advance!

Severin

Page structure:


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

@Severin_Weber hi ,please take a look at this
Not necessarily correct, but does work.

Hey @guoshuzhang

Thank you very much for your efforts! Really nice of you. I think that works perfectly!!

Best regards

1 Like

@guoshuzhang Thanks again for your help.
The thing with this method is, that if the user hovers over “webshop” the text “covers/blocks” the background image, thus the image does not invert. So it needs to go kinda “through” the text.
I know it’s a detail but users will hover above the webshop text to get there since it’ll be a link and if it then doesn’t invert the whole thing is for nothing.

@Severin_Weber use element trigger

@guoshuzhang Thanks again man for your efforts! Seems to have worked! :slight_smile: But quite complicate for a simple step like this haha :smiley:

1 Like