CSS3 Grayscale (kinda)

filters.svg

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="grayscale" x="0" y="0" width="1" height="1">
            <feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
        </filter>
        <filter id="grayscale_alternative">
            <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>
    </defs>
</svg>

style.css

.object-in-same-group-as-selected-object {
    filter: url( '../resources/filters/filters.svg#grayscale' ); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: grayscale(100%); /* Current draft standard */
}

.selected-object,
.object-in-same-group-as-selected-object:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
}

@jwilsson This should work

Works like a charm!