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.
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)
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?
@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.
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.
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.
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.
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.
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.
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.