[Resolved] Create a page background overlay on nav hover?

[Sven]

Hi Tom,

we’ve been trying to recreate this menu hover effect (see link) in GP for the better part of a day and were hoping you could point us towards a solution because she’s not really working.

The nav (logo and menu) should be on top while the entire page in the background gets the overlay.

Any idea how to approach this using a Header Element in GP?

Thanks!
Sven

[David]

Hi there,

it would require some Javascript, it’s experimental but you could try this:

<script>
const triggers = document.querySelectorAll('.menu > li ');
const overlay = document.querySelector('.page-hero');

function handleEnter() {
    overlay.classList.add('overlay-active');
}
function handleLeave() {
    overlay.classList.remove('overlay-active');
}

triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
</script>

And this CSS:

.page-hero {
    position: relative;
}
.page-hero:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    visibility: visible !important;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
.page-hero.overlay-active:after {
    opacity: 0.3;
}

[Sven]

Dude, you’re a STAR! Thank you so much!

[David]

I take it works lol
Glad to be of help.

[Author]

Posts