View image on hover based on CMS

Hi everyone.

I’ve looked everywhere for a solution for this problem yet im here writing! Hopefully the bright minds of the forum can enlighten me with this issue.

Cutting to the point:

I have an art gallery web with two columns.

One column has a list with the artist names. And in the other column there is one image.

I basically want to achieve that when you hover over the artist name the image on the other column pulls a CMS image of a painting of that artist.

I’ve figured out a way of showing the artist image on hover but it doesnt connect to the artist im hovering over to. Hope that makes sense.

This is the effect I want:

http://www.1x1artgallery.com/artist

As you see everytime you hover over a name it pulls a painting of that artist and so on.

This is my Webflow link:

Head over to the “Artist” tab to see what im talking about.

https://preview.webflow.com/preview/akka?preview=1443c0b71a18164c7c066a947c9950b0

Thanks a lot guys.

Hi Tomas!

In order to achieve the affect of revealing only one image per collection on hover, you’ll have to use multiple Collection Lists.

At this time you cannot style collection items individually, so the trick here is to use 1 collection per each artist name and 1 collection per each Artist Image.

You can then control the Collection Items visibility using filters and setting the Images collections to position:absolute. Finally, you can control the behavior on hover using Interactions 2.0.

I’ve gone ahead and created this effect, so that you can dive deep into the structure:
https://preview.webflow.com/preview/cms-images-on-hover?preview=acea90af63036c0775723c8945b748b0

Hope this helps :wink:

2 Likes

Hi Tomas, @Nita

Actually, I think this is possible with just one collection, using a similar workaround that @waldo created for the manual lightbox link using just 2 interactions and nested elements.

You can see below that this is with one collection only.

If you let me know if you’ve figured a way round it or not, I will record a screencast with your project if you want me to?

2 Likes

Hi Markos!

I really appreciate the video you created and can’t say enough thank you!

Let me just have a play with it in case I figure out the way and if not then your screencast would be amazing I just don’t want to waste your time.

Thanks a lot @Nita as well!!!

I’ll try both ways and let you know how it goes guys.

@Nita Im going forward with you approach in the end! Thanks. Im also concerned about how sustainable would those two approaches be on a stand alone basis. As my client won’t be able to add new collections every time she wants to add an artist.

I dont want to be stepping in every time she needs to arrange so which of these two has more independence in terms of she adding a new artist as CMS and automatically reflecting?

Thanks

@magicmark

1 Like

Does look amazing tho https://preview.webflow.com/preview/akka?preview=1443c0b71a18164c7c066a947c9950b0

:slight_smile: :smile:

2 Likes

That looks great!

Nice work!

Hello Mark,

I posted something about this same issue, and for some reason I can’t figure out how to apply this to my design. I’m having the same issue, where if I apply the interaction to the Collection List Wrapper, it applies the interaction to all items. I saw that Webflow updated their CMS to allow interactions for individual items but it’s honestly not working. Is there a way to use a single CMS List and apply the same interactions to each item within the list?

Here’s my preview link:
https://preview.webflow.com/preview/veryspecialmusic?utm_source=veryspecialmusic&preview=c6787e7328ffbdd8f20983ff888738d5

I’ve been giving it a go with Legacy Interactions, but the problem is the font colors can’t be changed with Legacy. Ideally can this be accomplished with IX2?
Please help! I’ve been trying this for ages and am coming close to a deadline and would like to see how this can be accomplished.

Hey @Jereme_Wijesekera,

I can see the interactions you’ve created with Legacy (super cool BTW). Have you done anything with IX 2.0 that you could point me in the direction of? Without seeing how you’ve got it setup, it’s difficult to tell where it’s not working for you.

It should be possible to change the font colour with IX 2.0, there are for more interactions you can do with elements, even CSS animations such as blur are now possible.

You don’t need to apply the interaction to the entire Collection Wrapper, only the collection item. In this case, you would use parent and child association, as to not affect the other CMS items.