Tremont template (v.7.0) gallery grayscale effect removed on only the individual image is hovered.

site: https://chameleon-tangerine-lbcl.squarespace.com/gallery-tremont
site pass: aspen1928

I've tried everything, but no success. I'm attempting to replicate a Cube Portfolio effect where all images in the gallery page(s) are grayscale until the mouse is hovered - but only the individual image color is revealed, and the image magnifies slightly - not all the images at the same time.

Example: https://gaston.chiuki.com/work/

This code works half-way, but not the hover function. 

#collection-63e171c55b32544875cfa03f {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#collection-63e171c55b32544875cfa03f:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

I've tried every combination I can think of. Can someone help?


 

You're applying the grayscale filter to the entire page, and removing it on hovering on the entire page, you'll need to target each image individually for both the filter and the hover.

Try this CSS instead:

#collection-63e171c55b32544875cfa03f {
  .collection-type-gallery .grid-image-wrapper img {
    filter: grayscale(100%) !important;
    transition:ease-in-out-400ms;
  }
  .collection-type-gallery .grid-image-wrapper img:hover {
    filter: grayscale(0%) !important;
  }
}

Hope that works better for you!

Thanks, but this also didn't work the images are neither gray, nor does mouse hover have any apparent effect.

I tried adding various other element tags but still no effect (chrome nor FF)

I'm absolutely flabbergasted! You're a genius! Thank you so so so much for the help. Now I can finally proceed! 
 

// Full working code to grayscale images and remove on hover for Trémont v.7.0 template

#collection-63e171c55b32544875cfa03f img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#collection-63e171c55b32544875cfa03f .sqs-gallery-design-grid-slide img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
.grid-item-wrapper:hover img {
    filter: grayscale(0) !important;
    -webkit-filter: grayscale(0) !important;
}