Hey!
Is it possible to set this kind of animation in Figma?
I built a grid with 10 images and all I want is to set a hover effect on each one of them.
The animation goes from black & white image into colorful.
At the moment it only work for the whole frame / grid, but that’s not what I’m looking for.
Thank you for the help!
Hi @Slawek_Buczyniak yes it is possible.
Firstly your image (or the card that contains it) needs to be a component so it can have a hover variant. After that is done, then hold Cmd/Ctrl and click on your image, on the right side of the screen in Fill section, click on Image and you can see its option pop open. Drag the Saturation slider all the way to the left.
Now make a hover variant and set its saturation to normal.
Thank you!
It still dosen’t work the way I would like to. I need to practice and I’ll find the way to make it work.
Has anyone figured this out yet? I can make it for one pic (with a component set) but it does not work as a component with which I want to change the image when using it… It would be great if someone can help.
The work around would be to create a component with two variants (Default and Hover)
each one containing a different image and each time you use an instance you would replace the two images (saturated and desaturated).
But you can only change both pics directly through the component, right? So the change affects every instance… And that’s the problem here. I can’t change the two images through the instance itself and because I can’t, figma only changes the hover to the pic set in the variant for the hover.
It’s not possible. Saturation is not something that carries over like an override. You can try and use an overlay with specific blend modes but likely won’t achieve the same result exactly.
I have done this a few times. @Antoine has correctly said that saturation doesn’t work for this.
What I do is add a rectangle over the photo, set the fill colour to #808080 and change the blending mode to Colour. This colour corrects the image underneath to almost exactly the same state as fully desaturating the image fill using the Saturation slider.
If you want to have this as a hover effect you can create a component with 2 variants; in the first you set the opacity of the rectangle to 0% and in the second set this opacity to 100%.
Then it’s just a case of prototyping this to animate while hovering or however else you want this to work.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
