Cross Browser Grayscale Images with CSS Filter

Web Design

In this quick article we will see how we can get Cross Browser Gray scale images with just CSS Filter only.

Live example of this you can see on footer of this website in about us section. The gray scaled image in footer is converted using CSS filter only.

Let’s see how we can apply this filter to convert image to gray scale:

Gray Scale Image CSS Filter

1
2
3
4
5
6
7
8
9
10
.my_image
{
background:url(images/main.jpg) no-repeat left top;
    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+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Now get our image back to real color :

Normal Image CSS Filter

1
2
3
4
5
6
7
8
.my_image:hover
{
 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"
);
    -webkit-filter: grayscale(0%);
}

Tags: #css, #css filter

Related Post

5
Leave a Reply

avatar
4 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
amitccAvinashTushar ThakurOrelMM Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
MM
Guest
MM

Good one dude…..

Orel
Guest

Can’t Firefox implement something like webkit’s?

Tushar Thakur
Guest

Good one, Can it work with the old Internet explorer?

amitcc
Guest
amitcc

Can you explain clearly about this tutorial?
I don’t get it all. Looking forward for better explanation.
However thanks for the tutorial.