grayscaling images – crossbrowser

well this challenge did not let me go.
a few days ago i posted a solution with jquery code but there are some inconsistencies.
The filter might work good but not on all browsers – especially on firefox.

There was a solution with svg filter settings : and here we are:

you have to make two files and name it e.g. gray.svg and color.svg with the following code:

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

and for color.svg

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

upload these files to your uploads folder (but best is via ftp)

now you can do the following quick css e.g for masonry or content-sliders

.av-masonry-image-container img, 
.avia-content-slider-inner img   { 
	-webkit-filter: grayscale(100%);  
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);  
	filter: url('/wp-content/uploads/gray.svg#grayscale');  
	filter: gray
}

.av-masonry-image-container img:hover, 
.avia-content-slider-inner img:hover    {
	-webkit-filter: grayscale(0%);  
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%); 
	filter: url('/wp-content/uploads/color.svg#grayscale')
} 

Result you can see here on a testenvironment:
http://www.guenterweber.com/entwurf/wp06/entwurf2

if someone is interestet in the bluring effect please tell.