Help building a tab style menu with CMS

Design help Animations & Interactions
1

Hey guys, hoping some one can help me with building this feature on a site I am developing. Basically it is a little interactive tab style preview for the sites latest blogs. I want the image to swap depending on the hovered item. And I want the info to be pulled in using the blog collection list.

I’m not sure if my terminology is right but I am either looking at using tabs with some custom code for the hover aspect or using a collection list with show/hide on hover.

Has anyone got any resources or tutorials that I can have a look at before building? Or how would you approach it?

Cheers

Screenshot 2025-01-27 at 1.28.05 PM
Screenshot 2025-01-27 at 1.28.05 PM3332×1658 144 KB

Here is my public share link: LINK
(how to access public share link)

2

Hello @Imtom14,
so this cloneable does almost exactly what you want Image Reveal on Hover & Mouse Cursor Follow Interactions - Webflow. The only difference is that the clonable has a mouse move interaction, where you can just adjust the layout to fit your design. I hope this helps.

3

Tabs + JS click on hover is the simplest and cleanest but it’s complicated with your CMS-sourced data requirement.

You might be able to use Finsweet’s CMS Tabs plus an API call afterwards to install your hover event handlers.

Another direction is a collection list an interactions to create a tab-like interface.

https://cms-driven-expando.webflow.io/

4

Hey memetican, thanks for your input with this… I am almost there and was hoping you could help me trouble shoot something. For some reason the only one that works is the last item and I can’t figure out why since they should all work the same way shouldn’t they?

I am also struggling with getting the image wrapper to crop the image inside of it rather than squash it.

Thanks again foir your help.

Read Only
https://preview.webflow.com/preview/auxilium-cc1d3d?utm_medium=preview_link&utm_source=designer&utm_content=auxilium-cc1d3d&preview=01bbeac7a13c3c68b910f88449c89cdf&pageId=6790134f5a859b81bb59efd4&locale=en&workflow=preview

5

Hey Tom, I’ve no idea what you’re asking me to look at.
Is it something on the homepage? That’s the page the readonly link is pointing to.

6

Sorry Michael, yeah it is this section (screenshot) on the home page. The cards are on the left and when you hover on them it changes the image on the right. But only the bottom one is working for some reason.

Does that make sense?

Screenshot 2025-02-04 at 4.49.50 PM
Screenshot 2025-02-04 at 4.49.50 PM1920×958 139 KB

7

Partly… but they’re all the same image, except #3 is cropped differently.
As far as I can tell they’re working fine, there’s just no change to see visually.

8

I’m doing a terrible job explaining this.

So, I’ve changed the image for each one now so the functionality all works as it should. What I’m having trouble with is the insights-feature-image-wrapper always being 100% of Collection-wrapper-insights-feature and then the image to sit inside insights-feature-image-wrapper and crop proportionately.

I need the wrapper to crop the image as these probably wont all be the same ratio once the client gets their hands on it.

Hopefully that’s clearer, sorry about the mince.

9

I can’t test it without publishing, but I’d usually make the image portion fill the frame, 100% 100%, and set it to fit: cover so that the image fully covers that space, and trims the edges.