Streaming live at 10am (PST)

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)

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)

1 Like

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.

1 Like

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!