Featured Image Rollover Color (and plus sign) disable on Illustratr theme

Hi Ryan!

You can make use of some custom CSS in order to remove that rollover effect.

As you already have Jetpack installed, the easiest way to add CSS is to enable its custom CSS module and then navigate to Appearance > Edit CSS. (Alternatively you can set up a child theme or activate a standalone CSS plugin).

Enter the following snippet in either the plugin’s editor or the style.css file of your child theme to remove the rollover effect on featured images:

.entry-thumbnail a:hover:before, .entry-thumbnail a:focus:before, .entry-thumbnail a:active:before, .entry-thumbnail a:hover:after, .entry-thumbnail a:focus:after, .entry-thumbnail a:active:after {
    opacity: 0;
}

.entry-thumbnail a:hover img, .entry-thumbnail a:focus img, .entry-thumbnail a:active img {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    filter: grayscale(0);
}

Hope that’s helpful. ?? Let us know if any extra questions come up.

That’s brilliant! Spent all day trying to work that out. I put it in the stylesheet and it works pefectly. Thanks a million Siobhan!

You’re most welcome!

To highlight: The above CSS should not be added directly to your theme’s style.css file. Any changes made directly there will be lost when it comes time to update your theme. I recommend Jetpack’s custom CSS module instead. ??

We’re right here if extra questions come up around that, too.

Is it possible to do this when you have “Personal Plan” through wordpress.com
or do you have to purchase the premium or business plans ?