prowebdesign

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 ??

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

vtxyzzy – you are my hero! ??

Thansk so much – this is what i needed! Thanks for pointing me which option is responsible for this first page ??

Many thanks!

Thanks henkholland, but this is not what i am looking for!

Thank you for responding! ??

The thing is that from the WordPress administration panel you can set a static first page and i need to know if there is a way to tell which page is set as the first page from all my 6 pages (Home, About me, Services etc.). I want to retrieve that static first page title.

I hope this helps ??

thanks a lot! ??