Drive an element's transition with another element's hover state

Hi guys! I have a question regarding my current design. Here is a link to the site:

The problem is on the “Works” page of the site, I’m trying to come up with a system where the thumbnails would act as triggers on hover, revealing a different description in the paragraph on the left side.
So when the mouse is over thumbnail #1 we see the description belonging to that project, when it’s over thumbnail #2 the description changes accordingly, so on, so on. So basicly I would stack a lot of hidden divs on top of each other with the descriptions, and always have the correct one fade in.

Is there a way to drive an element’s interaction with the hover state of another element? I haven’t found any way to do it. I hope I have described my problem clearly :slight_smile:

Hi @Doma_Harkai

Thanks for sharing your read only link.

Yes, you can do this the way you have you page laid out… give me a few minutes and I’ll record a video to demonstrate (hopefully)! It will be easier and quicker for me than writing out a description. Check back soon!(and yes, you described your issue perfectly)

Thanks for the quick reply! sounds promising, looking forward for the video!

Hi @Doma_Harkai

I hope this solution works. You’re basically embedding the paragraph into the Thumbnail, and showing it where to display with an interaction.

Try not to use the Hover state or legacy interactions and IX2.0 together though as it can cause issues on your site.

IX 2.0 is a far better solution as you can re-use everything to save time.


Hope that helps (sorry if I’m speaking too quick!)

lovely! really educational :slight_smile: highly appreciate the help and the advices, gonna recreate it now, thanks a lot!