Tabs Image Gallery

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?

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

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

There is no state for that in, right?

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/

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

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.

This is good! Thank you :smile:

2 Likes