Grayscale/Colors on Firefox

Please link your website.

Hello Andrew,

Thanks for replying!

I do not have it up yet. I’m self hosting! =(

What’s different about your site? Are you using a Child Theme for example?

My website, (also the spun demo). When I open them in Firefox the pictures in the circle stay always black and white even when I hover on them.
I thought it was something about the theme itself and the compatibility with firefox, but I found other websites (the ones I linked above) that they work just fine in FF. I’m just wondering if they found a solution that I can use..
Yes, I’m using a child theme. Many thanks.

Copy over the “inc” folder into your Child Theme folder

I did it already!

Didn’t work =/

This piece of CSS should fix the issue in Firefox. Please put it at the bottom of your child theme’s style.css.

.blog .hentry a .attachment-home-post, .archive .hentry a .attachment-home-post, .search .hentry a .attachment-home-post {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%); /* webkit browsers */
	filter: gray; /* IE 6 - 9 */
	-webkit-transition: all .6s ease;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
}

.blog .hentry a .attachment-home-post:hover, .archive .hentry a .attachment-home-post:hover, .search .hentry a .attachment-home-post:hover {
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Screenshot of the code in action on Firefox: https://i.imgur.com/hdEI7cH.jpg

Try adding this:

.blog .hentry a:hover .attachment-home-post,
.archive .hentry a:hover .attachment-home-post,
.search .hentry a:hover .attachment-home-post {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

.blog .hentry a .attachment-home-post,
.archive .hentry a .attachment-home-post,
.search .hentry a .attachment-home-post {
    filter: none;
}

IT IS WORKING!!

Many thanks!!

I have tested both solutions and they all work!
The first one from our friend @techievous, makes the default effect of the theme: circles stay black and white and they display colors when hovered.

The second one from @andrew works beautifully and it makes the opposite: Circles display colors and change to b&w when hovered!

Thanks you all!

Andrew, I have just one last question:

My title posts are duplicated when there’s no Featured Images on the post.

I followed everything from this thread as you suggested, but with no success.

I hope you can help me, I will create another thread so others in the same situation can see.

THANKS THANKS THANKS! BEST SUPPORT TEAM I HAVE EVER SEEN.