Hover a dynamic collection list item to reveal a CMS image in the background

Hi!

I’m hoping to get some help from some of you brilliant experts on something that may be super simple. I cannot find an answer here on the forums, or whenever I find an answer that could help me, the read-only link is invalid / expired.

Okay, so I am building a website for a client, she has 13 projects. They live in the CMS.
I have a text list of these projects sitting in a Dynamic Collection List item. The task at hand is to create a hover effect, so that when a user hovers a number, an image is revealed in the background. The image is from the same CMS project as the number, so dynamic.

I think I found out how to do it with static content, but I cannot figure out how to do build the structure with dynamic content from the CMS.

Got a hint?
Thank you in advance.

J.

My read-only is here (haven’t gotten far)

1 Like

Hey again, no one.

I figured it out, I think:
I put a link into the Dynamic Collection Item, with which I created my list of numbers from the CMS. Then I added a div and set the background image to cover and fixed with manual positioning and the correct z-index to match my design.

Then I created an interaction on the Link (the numbers in my list) that turned opacity on/off on hover over & hover out.

If anyone wants to have a look, the read-only is here (don’t know for how long. That seems to be a general issue for this Forum)

4 Likes

Looks good! Read-only links will keep on working unless you change the name of a project since that’s embedded in the link. Why would they be an issue on the forum?

Oh, I actually didn’t know that. I thought that if I deleted the page I was working on, the link would become inactive. Good to know.

I’ve seen a bunch of read-only links in the forum that goes to 404s, but that if then because people rename or perhaps even delete the projects :slight_smile:

@jacoblindblad Nope, the read-only link is for the whole site, not just a single page. There are definitely lots of cases of 404, often because the project is renamed or because the link wasn’t copied properly.

2 Likes

Ive been looking for this for ages, thanks for putting out the information. Im still having trouble only showing only one image at a time

Do you need help? I’m no expert, but perhaps I can have a look if your structure resembles the one from my project?

So I’m new to webflow, I build sites with Wordpress but this cms option is driving me nuts
so its on the blog section, I’m trying to make it like yours when i highlight one section it shows that photo not all the featured images.

let me know what you think, and thanks for taking a look.

Hey.

I’m fairly new to webflow as well, so I’m no wiz.

It looks like you’re doing the exact same thing as I’m doing, except I have all images positioned “Fixed” (lying on top of each other) where your composition is different, your images are positioned below each other in relation to the “blog post” title.

So, unfortunately I’m stuck here too. I wish I could help & would love to know how to fix this.

Anyone else who can give James and me a hint?

cheers, @jacoblindblad thanks for trying, i had a good few hours playing around with it with still no luck. Im guessing it might be a custom CSS job

1 Like

Hey @jacoblindblad

Thanks for your project. It helped me to understand the structure of the interaction.

Not working for me completely, and I don’t really know why. My problem is that the div block 9 only shows up one picture every time I hover a word (CMS link), the same picture actually. Do you know why? I think it can be a Z-positioning issue, but I don’t see how to solve it.

https://preview.webflow.com/preview/leixida-org?utm_medium=preview_link&utm_source=designer&utm_content=leixida-org&preview=324fcd89b4082f02c0df37f1ad764315&mode=preview

Can you help me with that?
Thanks!

Thanks for this tutorial.
I did not succeed the first time because I did not correctly set the interactive trigger in the interactions.
Should be: Only siblings with this class.

@jacoblindblad Thanks so much for this. This solved it for me!

Hey everyone, I am stuck having a similar issue. I cannot see make sure only the image related the specific collection item shows on hover. Only ALL the images.

Read only not seeming to show interaction at all so here is published: https://style-guide-2b49d7-472761-1af274f67d6ba.webflow.io/

& Here is read only: Webflow - CMS Image Collection

I have tried apply only siblings with this class in interaction panel, no luck. HUGE thanks in advance.

cc: @oxido, @jacoblindblad

Hey everyone… I was looking for a solution and came across this post here. However, I found a neater solution using attributes. See this tutorial by Timothy Ricks.