Is there any way to recreate this functionality in Webflow

[webdes]

Please take a quick look at blueapron.com and how they use ingredients as links that change the box in the section “Farm-fresh ingredients from family-run businesses”.

Is there any way to recreate this in Webflow?

Thanks!

[Waldo (Waldo Broodrÿk)]

You could definitely create this using the tabs widget in Webflow & customizing each tab to be the image with a different background image on static, hover & pressed state for each tab.

Let me know if you have any questions please.

Waldo

[webdes]

Hi @Waldo

Thanks for helping! I know the Tabs widget but I don’t quite understand how you could turn a number of images located next to the tabs widget into the “tab buttons” that control the tab widget. Could you elaborate please?

Also, do you by chance know how to add those hover over circles that they use?

Thanks

[AlanBorger]

trying to break up what @Waldo said in simple instructions

1. separate tabs menu from tabs content and allocate them side by side;

2. inside tabs menu, your tab links will be your images so organize tab links according to how you want your images to be placed (you’ll probably need absolute positioning for that, assigning a different class for each tab link or to create a little grid there with your images/links)

3. each tab link will have to be set up as following:

3.1 add background img (ingredient)
3.2 on hover bg img changes to a different image with the highlighted ingredient (you need to create the image variations, i.e. with the dotted line)
3.3 when current or pressed bg img should be the second image

Hope that helps…