Streaming live at 10am (PST)

Changing Header Image on click


#1

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
http://sports.modernwebtemplates.com/

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!


#2

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.


#3

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


#4

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

Kind regards!


#5

Arjan,

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.


#6

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


#7

Hello, the public link is https://webflow.com/design/testarjan?preview=0bbf9c38cadf29a083a0aa66c4ffa90c. 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!


#8

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.
See: http://awesomescreenshot.com/0a53eo106b


#9

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!


#10

Your interactions are set right http://cl.ly/image/1F023t361U1b Good job!


#11

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


#12