Alternative to Grayscale filter CSS3

Question

I have created a menu where I have a colored logo in each section. I have given this sections a grayscale filter when they are not on hover but the problem, as said in here, is that each image appears in a different shade of gray, which I have understood is the normal behavior of this CSS filter.

So I am looking for a similar CSS solution that allows me to have all this logos in the same shade of gray when no in hover and once I hover them they go back to the original color.

This is my code when not in hover:

.li.logo-menu-seccion {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

And this is my code when hover:

-webkit-filter: grayscale(0);
filter: grayscale(0);

I am showing you a picture so you can see what I am talking about.

Answer 1

This filter will convert all non-transparent content to a constant grey on hover. If you have a white background in your image, then you will need to knock it out first. There is a way to knock out a white background inside a filter, but it's complicated - easier to do it offline.

#box-container:hover  {
 filter: url(#constantgrey);
}

<div id="box-container">

<svg width="200px" height="200px">
<rect fill="#FF0000" x="10" y="10" width="30" height="30"/>
<rect fill="#FFFF00" x="60" y="10" width="30" height="30"/>
<rect fill="#000070" x="110" y="10" width="30" height="30"/>
</svg>

</div>


<svg>
<defs>
 <filter id="constantgrey">
 <feColorMatrix type="matrix" values="0 0 0 0 .3
                                      0 0 0 0 .3
                                      0 0 0 0 .3
                                      0 0 0 1 0"/>
 </filter>
</defs>
</svg>