Change background upon hover

[LesMichels.fr]

Hi all !

I would like the fullscreen background to change when I hover a menu element.

I have tried the following code :

.menu-overlay .menu-item-76:hover {
background-image: url(‘https://dev.lesmichels.fr/wp-content/uploads/2019/07/About.jpg’)
}

But it only changes the background of the menu-item, not the whole background. Any idea on how to display it fullscreen ? Many thanks

The page I need help with: https://dev.lesmichels.fr/

[Paulie_D]

You can’t select UP the DOM with CSS.

You would need Javascript to do that.

[sukaram]

Yes, you’ll need javascript to do that. I have done this for you. Refer to this link. https://codepen.io/anon/pen/ZdgrXY

You can add overlay on ::after on .menu-overlay with black rgba so you can read the menu link text.

[LesMichels.fr]

Hi Sukaram ! Thanks so much for this code =)

I’ve tried it on Elementor, but can’t seem to make it work. If I pay you, could you implement it ? Please contact me here : [email protected] (I have also another small script to implement on another page and I suck at JS). Thanks anyway

[Author]

Posts