z-index of imagehover and carousel behaving inconsistently

[MartinRL]

Hi there,

https://martinrobertlutz.de/index/ (password: xyz)

When you scroll down to a position where the hovering images of the links in the index flip above the cursor, they lie on top of the carousel – as they should, since the carousel is placed on the bottom in the "layers" tool of the editor:

However, there are also projects with no link, only a hovering image. These somehow lie underneath the carousel, even though they belong to the same text element:

How come, and how can I make them lie on top as well? Addressing specific hovering images with their id via css has worked so far for size etc., but not for the z-index.

–––

Another issue that might be related, ist that the column on the right ("Freie Arbeiten...") behaves again differently. Here the hovering images lie on top of the text instead of underneath:

This text element has no different class or anything than the other three columns, why does the global setting of the addon ('put images under all elements') not apply here?

Thanks!
Martin

[arminunruh]

it seems that you enabled this setting:
lay options -> imagehvoer addon ->

it seems that all imagehover images that have a link are <a tags instead of <div tags

and it seems that <a tags behave differently in how they overlap things as you can see here:

their z-index is 3.

thats because how can they be clickable if they are behind something. they cant. so i chose z-index:3 for them as a default.

just disable this setting or try:

a.lay-imagehover-on-element.show,
div.lay-imagehover-on-element.show{
z-index: 1!important;
}

or try z-index:2!important

or whatever in

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

Just know that the click on the imagehover image wont work on tablets then i think

[MartinRL]

Thanks!!

Yes, I have the hoverimages set to clickable.

Your code with z-index 2 solved both my issues. And all the links still work on a tablet, which is great!

Just for understanding, that means I should also be able to address specific hover images by targeting the <a> tag, for instance if I want to have one specific hover image lie on top of all the other elements on the page. This code however doesn't seem to change anything (page: https://martinrobertlutz.de/about/ | pw: abc):

a[data-hoverimageid="2323"] {
display: inline-block !important;
position: relative !important;
z-index: 999 !important;
}

[MartinRL]

This javascript in the footer didn’t do anything either:

<script>
document.addEventListener("DOMContentLoaded", function() {
var hoverImage = document.querySelector('[data-hoverimageid="2323"]');
if (hoverImage) {
hoverImage.style.position = "relative";
hoverImage.style.zIndex = "999";
}
});
</script>

[arminunruh]

please try to find this dom element in your inspector
thats this one:

use this css

body.slug-about a.lay-imagehover-on-element{
z-index: 999!important;
}

[MartinRL]

Understood!

And it works like a charm.

Honestly, thank you Armin for all the support. You guys rule! :-)

Martin

[arminunruh]

thx :)) <3