Nav bar - Make a background image appear on hover

Hi everyone, I am pretty new here but working hard. At the moment I am trying to figure out how to make a graphic appear when hovering over the nav bar elements. Here is the scenario: the graphic is supposed to appear accross the body of the page, when the cursor hovers over a navigation bar element (eg home) - so the graphic is larger than the element that triggers it…
I am sure its a pretty simple thing to do - could someone please try to explain how to get there?
Thanks so much!

Hello :slight_smile: and welcome to the wonderful world of Webflow!

What you are looking to do it fairly simple. See this video for reveal elements on hover --> https://university.webflow.com/lesson/reveal-elements-on-hover - you mind find it helpful :slight_smile:

You could start by placing the image you want to reveal in the position it needs to be when visible. Then you would need to create a mouse hover animation for the nav bar element. For the 'hover on animation you would make the image visible (either with display and opacity); and for the ‘hover out’ animation you would then hide that image again :slight_smile:

I really hope this helps :slight_smile: if you don’t come right then just give me a shout and I will record myself doing it to show you.

1 Like