Image hover for logos

How To
1

Hello, how can I create an image hover effect for my references page. I have my customer logos in gray and want to show the colored logo version on hover.

Can I set this somewhere, or what do I have to do?

BR Donald

2

Hey Donald,

although this might be achievable using native Bricks settings I’d use some custom CSS for this. In my example I created a class logo--bw which you can add to to your image elements. Then just add the following CSS to this class:

root {
  transition: filter .2s;
}

root:not(:hover) {
  filter: grayscale(100%);
}

CleanShot 2023-07-05 at 17.33.57@2x
CleanShot 2023-07-05 at 17.33.57@2x3024×872 110 KB

Of course you can remove the transition part if you don’t need it.

Let me know if this helps.

Best,

André

3

Thanks aslotta,

I had not thought of this solution at all. I can also control the gray value via opacity.

But: I am looking for a way to do it similar to my existing page: https://v2-powerpoint.de/referenzen/

Thanks
Donald