Graysacle hover effect on all images but the one hovering over

Site URL: https://www.reidpohland.com/portfolio

I'm wondering how I can code so when I hover over one of the circles on the site, all of the other ones that I'm not hovering over turn grayscale? I'd like it so when you don't hover over any they are still full color, but when you hover over one that one is the only one that is still color.

I'd like effect of the gallery on this site:

But I can't find how to isolate the images properly.

7 hours ago, tuanphan said:

Add to Design > Custom CSS

/* grayscale images */
div#page-section-60c694a15b087b02325e889c>.row:hover .image-block {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
div#page-section-60c694a15b087b02325e889c>.row:hover .image-block:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

 

That works great. Just wondering if there is a way I can ease the color back in when the hover is released?

On 6/18/2021 at 9:18 PM, dnalhop said:

That works great. Just wondering if there is a way I can ease the color back in when the hover is released?

Hi. I see fine here. Can you explain clearly?

Video: https://www.loom.com/share/6464863a388c411a91895e64a54cff97