SVG filters on hover

by carey

HTML

<img src="http://placekitten.com/200/200" width=200 height=200>
<img src="http://placekitten.com/150/200" width=150 height=200>
<svg id=filters height=0>
    <filter id=f1>
        <feColorMatrix 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>

CSS

img:hover {
    filter: url(#f1);
}