Background image swap on rollover

I am trying to build a site where the main navigation rolls over to view various background images similar to the way this site works:

Appreciate some help and instruction on how to do this.


To organize an HTML structure it is possible approximately so:

Live version: Background image swap on rollover

Read-Only (see «Background image swap on rollover» Page):

Adjust background images in the Divs .nav-link-wrapper:
etc. :v::blush:

Hi, Thanks for your feedback. Could you give me a clearer instruction please, this doesn’t make any sense to me as I’m new to Webflow?


  1. Create two sections (.firs-section and .second-secion in my reference);

  2. Create an element what you need to paint, set him the background-color (white) e.g., set fixed position, z-index more than .firs- and .second- sections;

  3. Choose .second-section and create Scroll Into View Interraction with paint element (.white-black-element in my reference):
    When Scrolled Into View set: black Background color
    When Scrolled Out of View set: white Background color
    Offset is set ~88%

What does it mean you see at Webflow University: Reveal on scroll | Webflow University

Thank you. Much appreciated.