Streaming live at 10am (PST)

Tabs Image Gallery


#1

Hi, I am trying to replicate the example 2 of tabs.webflow.com - image gallery using tabs below the main picture in tab content. I am unable to set the interactions / css to work on tab open close and hover.

What is the correct way of setting the interactions togehter with hover opacity change?


#2

You don't need any Interaction for the hover opacity change.

Select the thumbnail element (the tab) and give it opacity 90%. Also click on Transitions and add transition for All. Then on the top of the styles tab (close to the class name) , select the hover state and set it to 100%.

http://take.ms/JlOxq
http://take.ms/8rk3g
http://take.ms/3Zb4f


#3

Okey smile but I also need to make the thumb full opacity when it is opened.

There is no state for that in, right?


#4

Please see Example 2 here, if what you are writing is really suitable for that, than I am sorry for misunderstanding and will try it your way.

http://tabs.webflow.com/


#5

I think I missed the point, let me a second...


#6

Ok.

Before giving your tabs extra classes to add your images as backgrounds, do this:

select a tab, NOT the one with the "current" class. set opacity 90%. switch to hover and set opacity 100%.
select the tab with the "current" class and set opacity 100%.

You should get this : http://sab.webflow.com/tabs-hover

now you can add extra classes to each of your tab and change the background image for each.


#7

This is good! Thank you smile


#8