Change porfolio grid hover overlay to color on black/white images

Hi,
I would like to have the Enfold porfolio grid images appear as black and white and then become color on hover. I followed instructions on another thread (https://kriesi.at/support/topic/grayscale-hover-effect-on-portfolio-items/) but it is not working. The custom css I’m using is shown below. What am I missing? Thanks for your help.

.image-overlay .image-overlay-inside::before {
background: none!important;} /*removes arrow on hover*/

img.attachment-portfolio.size-portfolio.wp-post-image {
-webkit-filter: greyscale(100%);
}
img.attachment-portfolio.size-portfolio.wp-post-image:hover {
-webkit-filter: none !important;
}
.grid-image img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
-webkit-transition: all .6s ease;
transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
}
.active_portfolio_item .grid-image img, .grid-image img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
}