Greyscale on other images that the one currently hover?

Design help Animations & Interactions
1

Hello,

I’m rooky in the area so please be understanding :slight_smile:
I have a question, I was looking the solution for my problem but i couldn’t find it on the forum or internet so i’m asking for help.

I would like to when I hover a picture the others in the grid become grey (in the filter greyscale). I know that it is possible to have them grey at start and be colorful when I hover one picture but i want them colorful when nothing happen and ONLY when i hover one picture the others start to be grey.
I don’t know if you understand me but I have tried my best.
So if you know how to do that please don’t hesitate.

Thank you.

2

Hello @Madere,

all you have to do is to select the hover state on your element’s class and go all the way down on the styling panel to effects
Screen Shot 2020-01-27 at 11.01.52 AM
select add a filter and then select grayscale. then go back to the none state and that is it. Let me know if you have any questions.

3

Hey @Madere,

this is solved via Javascript or IX2.
Create a Mouse Hover Interaction and set the trigger of the Hover IN & OUT only on Class Siblings.

Best wishes,

Dennis from Vibrand Design

4

hello @Pablo_Cortes

Yes I understand your meaning and thank you but that is not what I want. I will attach some screenshot.
So i want exactly that on the hover on the second picture but the thing I want as you can see on the first picture that is when nothing happen. And that is my problem, I want the picture to be colorful and not in greyscale.

Hope you understand a little more my questionning now.
Thank you again for you answer.

Capture d’écran (16)
Capture d’écran (16)972×562 200 KB
Capture d’écran (17)
Capture d’écran (17)1051×559 407 KB

5

Hey @Madere,

this is easier than I thought.
Set the Greyscale filter on all images.
As hover you set the greyscale to 0 and that’s it.

Hope this helps.
Best wishes,

Dennis from Vibrand Design

6

Hello @Madere,

I got your question now, I think @Dennis_K gave you a right answer. Additionally you can use the hover state too, I did a quick video on how to accomplish that https://www.loom.com/share/9c69ce40f2b347029f1ff3f42c5513c2, i hope it helps.

7

@Dennis_K, @Pablo_Cortes

Hey guys, thank a lot with your advice i could done what i wanted. Both of you are angels for me thank a lot really !

And again sorry i’m not a native english speaker it can be hard for me to explain what exactly what i want ahah.
Anyways have a good day !

2 Likes