Streaming live at 10am (PST)

Tabs or some other way? Need an image swap with link


#1

Hey folks. I started this, but now I am thinking I might need to do it differently.

I’d like 5 tabs horizontal over an image. As someone rolls over a specific tab, I want something correlated in the image below to be highlighted. If they click on that tab, a new window will open (or it will take them to a form) to fill out associated with that particular selection.

So, I started with “tabs” but now realize I have no way to link to anything. Now I am thinking I need to create a “section” with multiple link blocks in it and then create hover interactions to fade in the appropriate image below the link blocks.

For the images I have one image copied 5 times with a different part highlighted on each image. it’s a basic image swap type situation, I’m just now sure how to best do it in Webflow especially since I need the button (or tab) to link to something (either a “form” - new to me, haven’t made one yet) or a pop up window wit a PDF files I have.

Thoughts or links to demos would be very much appreciated.


#2

Hm, this used to be pretty simple in some of the Adobe software. Is this not possible with Webflow?


#3

Add live exampe (site / codepen / jpeg screenshots) its hard to understand your q like this.

  • Also, please seperate your task to sub tasks.
    Example: The idea of clicking on button X and fillup form in pageY not related to tabs and animations (search on the forum about this topic)

Thanks


#4

Ok, so something like this on my old photography website done in Dreamweaver: http://www.greene-art.com/about_me.html (roll over the blue text and you will see the image swap).

However, unlike that page, I want a person to be able to click on that text as a link (to take them to another page or maybe open a form - undecided yet).


#5

As I think about it I figure I’ll need to use a link block for the buttons. Then use the images positioned identically and an interaction to change the opacity when someone rolls over the link block either revealing or removing an image.

Come to think of it, I’ll probably have to make it reveal. Since there will be multiple images I’ll need just the base image visible with a low Z Index. Then when they roll over I’ll need to make the opacity of the overlying image come up to 100% “revealing” it. Does that sound like it would work?