Image blurry/flickering on saturation hover effect

Design help Animations & Interactions
1

Hey there design pals :slight_smile:

I’m currently working on getting these reference cards to work. When I try to use the filter->saturation hover state (from 0% standard to 100% on hover and reverse), I noticed that there is a weird flickering and blurriness going on.

I have tried using custom code posted by @vincent that he published some time ago in the hopes that would fix my problem, but it still persists.

Does anyone know how I can solve this?

I guess that the image is somehow not fully loaded in when activating the hover state, but how can I fix this?

Regards,
Hendrik

Here is my public share link: https://preview.webflow.com/preview/elumico-neu?utm_medium=preview_link&utm_source=designer&utm_content=elumico-neu&preview=28ae5185337dc8fdd9dacf6bdfa4f9c3&pageId=605484adc0666ac4334e75e2&mode=preview
(how to access public share link)

2

https://preview.webflow.com/preview/elumico-neu?utm_medium=preview_link&utm_source=designer&utm_content=elumico-neu&preview=28ae5185337dc8fdd9dacf6bdfa4f9c3&pageId=6054938351f8f6803e86427a&mode=preview

Okay, somehow the first error mentiond above solved itself while designing and testing out on another testpage,

but now I face the problem that with the card moving up and down due to the hover animation,
it seems like the content inside the card is slightly moving right then to the left.

Is this a problem due to wrong alignment use of flex?

3

I’m really sorry for the confusion, but I guess this was just some visual bug with the preview mode. Once I publish it to https://elumico-neu.webflow.io/referenzen it just works fine :stuck_out_tongue: