Portfolio grid greyscale to colour hover effect

Site URL: https://ranunculus-caterpillar-62hs.squarespace.com

Hello,

I am trying to add from grayscale to colour overlay on hover to the portfolio grid:simple.

1 hour ago, Voila said:

Site URL: https://ranunculus-caterpillar-62hs.squarespace.com

Hello,

I am trying to add from grayscale to colour overlay on hover to the portfolio grid:simple.

Add this in Design->Custom CSS
 

.gallery-grid--layout-grid .gallery-grid-item img {
  -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.5s;
}
.gallery-grid--layout-grid .gallery-grid-item:hover img {
  -webkit-filter: grayscale(0);
    filter: grayscale(0);
    filter: none;
}

21 minutes ago, bangank36 said:

Add this in Design->Custom CSS
 

.gallery-grid--layout-grid .gallery-grid-item img {
  -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.5s;
}
.gallery-grid--layout-grid .gallery-grid-item:hover img {
  -webkit-filter: grayscale(0);
    filter: grayscale(0);
    filter: none;
}

When I added this code to Custom CSS nothing changed. This code works only for gallery section grid but not for Portfolio grid tiles.

14 minutes ago, Voila said:

When I added this code to Custom CSS nothing changed. This code works only for gallery section grid but not for Portfolio grid tiles.

oh sorry I misread the question, could you enable your site password to check on yours?

2 hours ago, bangank36 said:

oh sorry I misread the question, could you enable your site password to check on yours?

https://ranunculus-caterpillar-62hs.squarespace.com/portfolio-2

password: squarespace

6 minutes ago, tuanphan said:

Add to Design > Custom CSS

a.grid-item {
    filter: grayscale(1);
}
a.grid-item:hover {
    filter: grayscale(0);
}

 

Thank you so much!