Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It’s not exactly greyscale but you could try this:
.thumb-wrapper {
background: black;
display: inline-block;
}
.attachment-tc-thumb {
opacity: .4;
}
.round-div:hover ~ .attachment-tc-thumb {
opacity: 1;
}
http://cssdesk.com/8Kq2D
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Btw to answer your questions
1) when introducing the code for Firefox (SVG filter), the images are not shown anymore in Firefox.
You need to load a SVG file to help Firefox understand this grayscale filter, like the one that the old Spun theme used http://themes.svn.wordpress.org/spun/1.07/inc/desaturate.svg .
2) in Chrome the filter to grayscale works, but if I hover over, the image does not show up in colores.
I’m assuming this is because you’re using a class of “hover” instead of the pseudo selector, but I obviously can be wrong.
Thanks for the nice short code! For my styling your solution is however too dark (blackish).
But I really appreciate that you have provided useful code to adress the styling: applying to .attachment-tc-thumb and .round-div:hover ~ .attachment-tc-thumb the grayscale filtes work fine in Chrome.
In Firefox I still have problems, as the image is not displayed in normal state, but when hovering gets showed (in color).
EDIT: I will look into your second posting and hopefully find a solution also for Firefox. Thank you very much.
I think I now know what was the problem: the Customiz’it CSS field probably does not encode properly some characters. Example in the final browser HTML file:
<svg xmlns='http://www.w3.org/2000/svg'> (char encoding not shown here)
Original code as intended:
<svg xmlns=\'http://www.w3.org/2000/svg\'>
I have now moved my experimental CSS code to a child theme, and it seems to work perfectly with the grayscale filter code also in Firefox.
But I’m unable to address the whole article on hover instead of only “.round-div:hover” for changing the image back to color (same area as where the “image expansion effect” is triggered). I hope this is understandable and would be happy to reach my ultimate design customizring 😉
Thx
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’d need to link the page with the issue
I’m sorry but I have the “experimental” WP project on a local WAMP system.
I would like to trigger the hover filter grayscale effect, when the mouse moves over this code section
<article id="post-243" class="post-243 post type-post status-publish format-standard hentry category-stand category-test category-experi tag-paper tag-public row-fluid">
<section class="tc-thumbnail span4"> … </section>
<!-- .thumb_class -->
<section class="tc-content span8">
<header class="entry-header">
<h2 class="entry-title format-icon"> … </h2>
<div class="entry-meta"> … </div>
<!-- .entry-meta -->
</header>
<!-- .entry-header -->
<section class="entry-summary">
<p> … </p>
</section>
<!-- .entry-summary -->
</section>
<hr class="featurette-divider"></hr>
</article>
I tried to access this area with
article:hover ~ .attachment-tc-thumb and
article.hover ~ .attachment-tc-thumb and
post:hover ~ .attachment-tc-thumb
But I’m not enough trained with this advanced hover CSS.
Thx for the support.
That code doesn’t work in all browsers. It has a lot of workarounds. You didn’t copy important parts of it.
Yayyy – I got it to work to my satisfaction in Chrome and Firefox. (use child theme and not Customiz’it CSS). However only by trying (looking at Customizr CSS code), not by understanding 😉
/* post-image grayscale to hover-color */
.attachment-tc-thumb {
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+ */
filter: gray; /* IE6-9 */
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
.widget-front.hover .round-div ~ .attachment-tc-thumb,
article.hover .round-div ~ .attachment-tc-thumb {
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");
filter: none;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}
Thanks Andrew!!!
I think cleaned up for obsolete code this could be (together with other filter effect options) a nice add to code-snippets 😉
Interestingly Mozilla does list the CSS filters nicely, but still not support them in latest Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Andrews answer is correct, but it will not work on Internet Explorer 10 and 11 versions because Microsoft removed the browsers native Grayscale filter support.
Currently the only way to acomplish this is using either 2 images (one color, other B&W) or using JS + SVG solutions like this:
// Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter
$('img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscaleIE10(this.src);
});
// Quick animation on IE10+
$('img').hover(function () {
$(this).parent().find('img:first').stop().animate({opacity:1}, 200);
},
function () {
$('.img_grayscale').stop().animate({opacity:0}, 200);
}
function grayscaleIE10(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
};
};
By the way here is a cross-browser friendly working Demo – Cross-Browser Grayscale image example using CSS3 + JS
Thanks for this additional example Streamline!
In my case I like to have “CSS-only” and MSIE is not a priority for me. I have seen suggestions that IE10+ may works if compatibility for old IE is forced with
<meta http-equiv="x-ua-compatible" content="IE=9">
but I havent’t tried that out.
ChrisFo – this will work, but is really not a good practice because of the fact that Microsoft will continue to update Internet Explorer and there definitelly will be a MSIE12 and 13 etc. and it seems that they have abandoned this grayscale CSS filter for good.
So forcing the lates IE browsers like 10 and 11 to render like the old 9th one will get you up and running on the grayscale filter, but will cut off from the new features they will have included and updated in the latest versions of Internet Explorer. So this should be kept in mind 🙂
