Streaming live at 10am (PST)

Interaction - hover over multiple items to change info elsewhere - easily?


#1

Hi, Still getting to grips with this whole web business, and as an (old) print designer, I feel like Webflow is the way for me… hopefully.

I am trying to do a portfolio section of my website. I’d like to show samples of my work, with some info about each sample, this changes, but is in a defined set area. This info will update as different sample are hovered over (or on mobile as they scroll in to view, I think). See my screen shot for an example.
(The design is still unresolved, I’m just playing around with the interactions. The green area at the top would contain text that will change, depending on which work samples are hovered over. Some are re-used here while I work things out.)

I’ve looked at the latest reusing interactions info, but I think I would still need to write a new interaction for each example if I want to do this. I can apply an existing interaction to a class, but to differentiate items of that class they need to be siblings or children of the trigger. This does not appear to be possible with this kind of design where the effected element doesn’t have a … ahem… close family relationship. especially in a responsive design where the relative position of the trigger and target will be different depending on device.

But I could easily be missing something, as a beginner in this area.

I managed to get the info to appear directly on top of each sample (which I don’t find great as the thing you are reading about disappears underneath).
I can see you could get some info to appear beside or below in close proximity to each design, but then you’d have to leave some space for that, there wouldn’t be the efficient grid that easily responsive.

I think it may be possible if I make each design a CMS entry. does that sound right? I wasn’t going to go down the CMS route, as it’s more expensive and I felt it wasn’t necessary. But maybe it’s the only way?

any help gratefully received :slight_smile:

Also, while I’m at it, I can’t work out whether columns or flex box is best for organising these samples. The problem with flex box is it seems you can’t do the thing that is most obvious to a print designer: Centre your grid of items on the page, and have the last item (if it’s not in a full row) align left. I have read some threads about this on the forum.

06%20PM|690x316