Streaming live at 10am (PST)

Background image swap on rollover


#1

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: http://fabulousbeast.net/home

Appreciate some help and instruction on how to do this.

Thanks


#2

Hi,
To organize an HTML structure it is possible approximately so:

Live version: http://broplayground.webflow.io/background-image-swap-on-rollover

Read-Only (see «Background image swap on rollover» Page): https://preview.webflow.com/preview/broplayground?preview=40af429e66874b74d9b8b7eef49c2ac1

Adjust background images in the Divs .nav-link-wrapper:
.naw-link-bg__1
.naw-link-bg__2
.naw-link-bg__3
etc. :v:️:blush:


#3

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?

Thanks


#4
  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: https://university.webflow.com/lesson/reveal-elements-on-scroll-interactions


#5

Thank you. Much appreciated.