Hover text / grayscale

Site URL: https://bumblebee-drum-w3fz.squarespace.com/interiordesign

hi,

I used the tutorial from Brandon for the hover effects: 

Everything is perfect, except the hover effect. I have an opacity effect and I would like grayscale 100% .

I have this CSS: 

figure.gallery-grid-item.has-clickthrough:hover img {
    filter: grayscale (100%);
  }

But it is not working.

I also tried:

.gallery-grid-item img:hover{filter:grayscale(100%)}

Can you help me ?

Thank you !

I'm guessing the Javascript for the captions is interfering. I just did this on a brand new page with the sample gallery and it works fine to turn them gray on hover.

.gallery-grid-item img:hover {
  filter:grayscale(100%);
}

yes I know @ChrisBartow because it was working before the tutorial. (just the grayscale without the text hover). 

And I also have an other problem: now I am not able to go to the image link when I click on it.