Hover animation

Hi all !

I’ve been working on my website and I struggle with some hover animation.
I attached two screenshots so you understand better, but here is the problem :
I want to show project information and a background image when I hover a link.
It works fine when I use the interaction on a single element, but when I reuse it to the next link, it actives both animation instead of the relevant one.

I added different classes to each elements, and in the interaction tab, I selected for each class “only children with this class”. I also changed the trigger setting into “class”. I followed the steps of a Youtube tutorial.

One thing I should mention, when I changed each class to “only children with this class” it freezes all my interactions and nothing works appart from the background image showing up. My animations only work when affect is “All elements with this class”.

All I want to do is activate animations on hover, and then reuse those animations but on an other link and modifying the animated content. (otherwise I would have same informations, title, role, date, background image for each project)

I hope someone can help me with this problem I can’t figure it out :thinking:

Thanks in advance,
How it looks on hover :

How it should look on hover:

Here is my public share link: LINK

And the live version : LINK

i think you should try to use js to realise this .

I am still starting out and not very comfortable yet with code…

If someones has the same problem, do not use the interaction on your link, but on the div containing your elements. This should solve the problem :slight_smile:

1 Like