Hoover effect on sponsor logos

Hi Squarespace Community!

I have searched the forum, but didn't find an answer for my specific questions ... so here it is:

My client has sponsor logos on their website.
These logos should be now displayed all in grey ... and on mouse-over these logos should get a little lighter. On click the user gets directed to the sponsor's website.
This is the site my client got the inspiration for this kind of logo presentation: https://www.weissraum.at/ (just scroll to the bottom).

Any idea how I can achieve this effect in Squarespace?

Best,
Christian

Can you share a link to your client's site? If it's still in trial mode add a site password using this guide https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

Here is a link to my client's website: www.limonada.at

Here is a link to my client's website: www.limonada.at

@judgereini try this in custom CSS?

#yui_3_17_2_1_1699303320002_115 img {
	filter: grayscale(100%);
	transition: all .3s;
}
#yui_3_17_2_1_1699303320002_115 img:hover {
	opacity: 0.75;
}

You will still need to link each image directly to the website it's supposed to go to though... but the above should take care of the visual effects.

1 hour ago, jaeveedee said:

If you want it for all the images in that section you could do it like this. This way you don't target individual images.
 

section[data-section-id="652cdfe47161a10cf9d95eb2"] .sqs-block-image {
  img {
    filter: grayscale(100%);
	transition: all .3s;
  }
  &:hover {
    img {
      opacity: .75 !important;
    }
  }
  
}

@jaeveedee the div ID I used chooses the whole section of content as well, not individual images, I just went a couple layers further in than yours 🙂

@SaranyaDesigns I didn't even check, for some reason I just assumed that was the individual block id. That works too!

Thanks a lot for the code! That was exactly, what I was looking for :-)))

Your help is very much appreciated!!!

All the best,
Christian