Make Gray image using css (Support all major browsers even IE 7,8,9)


One of my project , i have to make all images gray onload and make it color when mouse hover on image.

There are a lot of solution in web using jquery, html5 but i would suggest to do it through CSS so that it will support all browsers even IE all lower version.

Solution:

/** WORKING FOR GRAY IMAGE AND HOVER */
.grey img{
opacity: 1;
}
.grey img {
filter: gray; /* IE6-9 */
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
}
.grey img:hover {
filter: none;
}

/** Gray image css finish */

Advertisements

  1. #1 by Nauris Kolāts (@NaurisKolats) on December 17, 2013 - 9:26 am

    Since Microsoft removed the browsers native Grayscale filter support on Internet Explorer 10 and 11 versions, we no longer can use a CSS filter. 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(“”).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();
    };
    };

    Here is a cross-browser friendly working Demo – http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11/

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: