Problem with CSS Filter in some browsers

Question

I’m trying to use the parameter filter CSS, but in some browsers with Chrome and IE not working, already in firefox it works normally as desired. The code I have is this:

.empresas-marcas ul li a{
-webkit-filter:grayscale(100%) contrast(1000%) opacity(30%);
-moz-filter:grayscale(100%) contrast(100%) opacity(30%);
-ms-filter:grayscale(100%) contrast(100%) opacity(30%);
-o-filter:grayscale(100%) contrast(100%) opacity(30%);
filter:grayscale(100%) contrast(100%) opacity(30%);
-webkit-transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
-ms-transition:all 300ms ease-in-out;
-o-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
}

.empresas-marcas ul li a:hover{
-webkit-filter:grayscale(0);
-moz-filter:grayscale(0);
-ms-filter:grayscale(0);
-o-filter:grayscale(0);
filter:grayscale(0);
-webkit-transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
-ms-transition:all 300ms ease-in-out;
-o-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out
}

This code leaves the image black and white and when I hover over the image it becomes colored.

I don’t know if you have to add some javascript help to make it work, but I needed to fix it urgently.

Answer 1

According to the website Can I use, the css filter property is only supported in edge, not Internet Explorer. Also, there is an error second line of your file. A 1000% that should be 100%.

Answer 2

To apply the transition to a "filter" correctly, you must pass the new value of all filters that have been applied and not only what you want to change.

For example:

a {

    filter: hue-rotate(45deg) brightness(1.5);

}

a:hover {

    filter: hue-rotate(0deg) brightness(1);

}