On hovering over one element, fade out other elements

Design help Animations & Interactions
1

Hi all,

I have created a list of my case studies on my website. When I hover over a case study, I want to fade out the rest of the images to roughly 20% opacity. Is there a way to do this?

Thanks!
M

53
53828Ɨ1152 181 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @michael_lieu your readonly link seems to be broken. Can you try sharing it again?

1 Like
3

Sorry about that - just updated the link! Thanks!

https://preview.webflow.com/preview/michael-lieu?utm_source=michael-lieu&preview=3053cf46a530a12f95b2180f4840a094

4

Just adding,

What about simply reversing your thought. Have all of them faded at 20% opacity to start, then the hover can show 100% highlighted capacity? Would be an easy fix. You can set the opacity of each box in the styles panel at the bottom. Then the interaction would bring it up to 100% opacity on hover and back down to original 20% on hover out. :wink:

5

Thanks for the reply, but a friend of mine solved this issue for me with a bit of JS.

If I understood correctly, when the parent div is hovered, the siblings will then add the class ā€˜project_fadeā€™ which is then styled in the style tags.

script
$(function() {
$(ā€œ.link-block-2ā€).hover(function() {
$(this).parent(ā€œ.case_study_containerā€).siblings(ā€œ.case_study_containerā€).toggleClass(ā€œproject_fadeā€);
});
});

style
.project_fade {
opacity: 0.25;
}

Thanks!

6

Nice! I like itā€¦ Take care then.

7

Hey @michael_lieu, would you mind sharing a readonly link to the end result? Iā€™m curious how you implemented it