Fading all other items but the trigger

Design help Animations & Interactions
1

I have a design where I have a bunch of cards. When one of the cards is hovered over I want all other cards to fade out. I can get this to work when all of the cards are siblings like in row 1 of my share link. However, due to layout constraints I can’t have all the cards within one parent group. If I effect all items with that class then all the items fade but so does the trigger card.

Is it possible to target all classes minus the trigger when all of the classes don’t share a parent or will I need some custom code?

Here is my public share link: Link

2

I was able to figure this out with some jQuery if anyone ever needs it.

<script>
    $( ".class" )
      .mouseover(function() {
    $('.class').not(this).animate({'opacity':'0.2'}, 100);
      })
      .mouseout(function() {
    $('.class').not(this).animate({'opacity':'0.9'}, 100);
      });
</script>
1 Like
3

I have found another solution you can make it with the same hover interaction. What you have to do is keep the same class hover interaction you have already made. Create another hover interaction.
1 - on hover change opacity to 100% and
2 - on hover out state leave it empty.
3 - Select class in trigger settings

2020-05-10_0113
2020-05-10_0113296×852 24.6 KB

image

2 Likes
4

Sweet, that worked! Nice job. One thing to note, the 2nd mouse hover animation needs to be set to “Interaction Trigger”