Hover to activate one CMS image

Hi!

Please see image. I have set everything up so the titles come from a CMS Item, and the images as well. I have set up an animation so the images pop up when I mouse over the div blocks, which the titles are within. But I only want one image popping up in the middle, and it should be the image corresponding to the right title. How do I do that? Does that make sense?

All the best,
Mateas


Here is my site Read-Only: Webflow - Mateas Pares
(how to share your site Read-Only link)

If you’re using interactions, the best way is to put the image element itself inside of the collection list item that forms your tiles. It will be initially hidden, and bound to the image you want.

Positioning, sizing, etc will be set to wherever you’re wanting that image to appear.

Your hover trigger will likely be class-based, and would then show/hide a child of the hovered title, that’s how you get the correct item to show.

Likely, on hover, you’ll first need to hide all of the tile-images, so that the previous one goes away.

The image should be positioned like the middle image. But I don’t want the other images to show, only the one triggered by the mouseover of the corresponding artwork title (Hour 339 569, etc are artwork titles). I’m sorry but the help is a bit too abstract for me. I need more of a step-by-step guide. I have no idea how to use that class-based info described, or what you mean with tile-images.

(And I haven’t forgotten about our other thread :slight_smile: Still figuring it out… nothing seems to work)

Too much time investment there, and year-end is mad-busy for me.
Maybe someone else can help.

Worth noting, it would actually cost a lot less time to build it that it would to write a step-by-step. If you’re needing someone to build it for you, you can drop me a message.

Without an understanding of how interactions work, you’ll be stuck- I recommend you start there with the Webflow U courses and get very familiar with how to class-target your triggers and relative-target the affected elements.

You’ll need to understand both of those in order to build this.

Also my design approach above will make a lot more sense once you understand how interactions targeting works.