Hover effect on poster images

Site URL: https://ideam.squarespace.com/about-ideam

Hello,

I'm trying to create a hover effect on poster images. The idea is that the black logos in the "our clients" section will be grey while inactive, and turn black when hovering. The original images are black, so I tried changing the opacity when inactive, but it did not work.

Can you help?

Thank you!

Try adding to Design > Custom CSS

section#about-clients img {
    filter: grayscale(1);
}
section#about-clients .image-block:hover img {
    filter: grayscale(0);
}

Thank you for your answer!

It did not work, but I've added an "opacity" line to the code you sent and it worked:

section#about-clients img {
    filter: grayscale(1);
  opacity: 0.5;
}
section#about-clients .image-block:hover img {
    filter: grayscale(0);
  opacity: 1;
}