Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Please link your website.
Thread Starter
lleo
(@lleo)
Hello Andrew,
Thanks for replying!
I do not have it up yet. I’m self hosting! =(
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What’s different about your site? Are you using a Child Theme for example?
Thread Starter
lleo
(@lleo)
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Copy over the “inc” folder into your Child Theme folder
.
(@techievous)
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=\'http://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=\'http://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: http://i.imgur.com/hdEI7cH.jpg
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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=\'http://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;
}
Thread Starter
lleo
(@lleo)
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!
Thread Starter
lleo
(@lleo)
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.
