Changing Header Image on click

Hi everybody,

I’m quite new to Webflow but I simply love it!
We want to create a header section as in the following link

When you click on outdoor sports for example, the header image changes. Is there a way (with tabs maybe) to create this effect?

I hope someone can help me.

Cheers from the Netherlands!

I can tell you what the principle is, I don’t have much time today to get into details.

What you need to build is:
one element (section) containing a pile of divs placed in absolute, each having a different background and each set to opacity 0 (minus the first one, set to opacity 100%). give a unique class to each element (bg-tab-1 etc for example)
another element containing your tabs element

Also you need an interaction for each of your tabs. This interaction will say : onclick, affect another element (target bg-tab-#, the one you want to show up) then set it to opacity 100%. Also add other steps, still affecting other elements, for each of the elements you don’t want to show up, setting them to opacity 0)

So the logic is : each time you click on a tab, it says to one div containing one bg to show up at opacity 100% and says to all the other elements to disappear to opacity 0. So you’ll end up with one interaction by tab.

Okay thank you very much. I will try it out even though it seems pretty hard for me…

Hello Vincent, would this be the best way to do it?
There’s a section underneath the tabs, is there a way to give it a fixed position underneath them?

Kind regards!


What section underneith the tabs do you mean? The Darksection? And where/how do you want it fixed?

If you provide us with a public link, we can see the design better.

For what I see, it works. What do you mean by “is there a way to give it a fixed position underneath them?”

Hello, the public link is I’m just not quite sure if the whole thing is set up right. If you could check it out for me, that would be absolutely fantastic!

I don’t understand why you’ve given the dark section so much negative margin (left, right, bottom). And why a absolute position with 840 px top.

I’d say you can remove all of those, give it a relative position and a -40px margin and you’ve got the same.

Hey Diu,

Well I’ve done that but I have the relative postion set with a -300 px margin. -40 doesn’t quite cut it.
But I removed all of the other margins, not sure why I did that haha.
Thanks for your help!

Your interactions are set right Good job!

Thanks for your help Vincent, it means a lot to me!