Archived topic
Create a page background overlay on nav hover?
3 replies · Started by Sven on April 6, 2019
Viewing posts 1–4 of 4
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
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;
}Dude, you're a STAR! Thank you so much!
I take it works lol
Glad to be of help.
This archived topic is closed to new replies.
