After image overlay, icon is behind the image

Support
#1

hi there,

i added an image overlay, but now the icon is behind the image. i tried to change the z-index but i had no luck.
and a second problem with the icon. i did a margin of -4em, so the icon should be 50% over the image. but this doesnt work?

can you help me pls?

thanks in advance

#2

Hey Harald,

Your z-index should be -1.

It looks like you’re using custom CSS. Please note that fixing custom CSS is outside the scope of our theme support. I showed you the fix only because it’s very simple.

Since you’re using a Grid, I’d recommend that you follow this video tutorial to overlap elements.

You can learn more from our Youtube Channel and also our Knowledge Base as well.

Hope that helps.

#3

hi christian,

thank you for your help. i did not try -1…
but when i use z-index: -1; in global css i cant select the image in the editor. is this a normal behaviour?
there is also some kind of error in the backend

the overlay code (css) that i use is from another post in this forum that some other staff member posted…

i also dont get it why the margin-top on the icon is not working with grid element? cant find the error. will look at the video l8er.

thanks again or your help.

cheers

#4

Hi Harald,

This is happening because of the negative margin you applied on the icon, please remove the negative margin.

That is normal in terms of CSS because now that image is behind a container <div> on the builder, so you can’t click it.

Make your Grid a 3 Columns, 2 Rows and separate the image from the icon/text. Then follow the Overlapping technique on the video above.

Or you can use the standard Row/Columns layout instead since that section design is not that complicated.

Thanks,

#5

thank you, will do that :wink:

cheers

#6

You’re most welcome,

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.