image hover bring to front

[leili]

hey, I want to bring the images of the image hover to the foreground (above the menu). I am currently using the image position ‘right background’.

here’s what I’ve tried so far, but it’s not working:

.lay-imagehover-on-element {
z-index: 2147483647 !important;
}

[arminunruh]

Hello, I think I was born in to your email.
In Lay Options → Image Hover Addon.

If that doesn't work, I will need the link to your website. To the page where this happens.

[leili]

@arminunruh
oh I'm sorry. unfortunately does not work yet.
https://www.lilliseiler.de/work/

[arminunruh]

Oh, you want them above the menu

Well, due to something called stacking context.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context

That's not really doable unless we change some things to have the images and the nav in the same stacking context.

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

/*stacking context, so zIndex of hover images are in same context as nav (i think they are with this) */
.lay-content{
position: static!important;
}
/*put lay nav zindex below */
.laynav{
z-index: 0!important;
}
/*we still had a opacity 0 navbar that would then be above our menu so hide it*/
.navbar{
display: none!important;
}

[leili]

@arminunruh thanks!