Remove the color over hovered image

Ammtar – could you please provide a link to your site?

This custom CSS will convert the blog grid images to greyscale in most browsers:

.blog .entry-thumbnail img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

This will remove the coloured rollover effect:

.hentry.has-post-thumbnail:hover .entry-link {
  opacity: 0;
}

And finally, this will remove the greyscale effect on hover:

.hentry.has-post-thumbnail:hover .entry-thumbnail img {
  -webkit-filter: unset;
  filter: unset;
}

Keep in mind that filter effects do not work in Internet Explorer:
https://caniuse.com/#feat=css-filters

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

The site is cejfing.com
Probably will go with child theme. I hear a lot of Jetpack plugin as a plugin #1, but many recently are trying to avoid it because it force you to connect to WP.com?!? Don’t know much about the whole situation, just read recently.

Thanks Kathryn, I appreciate your help,
ammtar

IT WORKS PERFECT!!!! ??
Thanks again Kathryn! ??

ammtar

You’re welcome. ?? It’s quite a nice effect on your site!

A connection to WordPress.com is needed to use certain Jetpack modules, to leverage their servers for things you wouldn’t want to run on your own hosting, such as an Elasticsearch instance for Related Posts or Photon for an image content-delivery network.

If for some reason you prefer not to use those modules and make the WordPress.com connection, you can still use the Jetpack modules that don’t require a connection, including the Custom CSS editor. Just put Jetpack in development mode to do that.