html - Alternative to Grayscale filter CSS3 -

i have created menu have colored logo in each section. have given sections grayscale filter when not on hover problem, said in here, each image appears in different shade of gray, have understood normal behavior of css filter.

so looking similar css solution allows me have logos in same shade of gray when no in hover , once hover them go original color.

this code when not in hover:

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

and code when hover:

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

i showing picture can see talking about.

this filter convert non-transparent content constant grey on hover. if have white background in image, need knock out first. there way knock out white background inside filter, it's complicated - easier 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>