Streaming live at 10am (PST)

View image on hover based on CMS


#1

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.


#2

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:


#3

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?


#4

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.


#5

@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

@markos84uk


#6

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

:slight_smile: :smile:


#7

That looks great!

Nice work!