Problem with CSS Filter in some browsers

Question

Problem with CSS Filter in some browsers

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am trying to use the filter parameter of CSS, but in some browsers with Chrome and IE is 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 you move the mouse over the image it becomes colored.

I do not know if you have to add some help javascript to make it work, but you needed to fix it urgently.

javascript html css

asked by anonymous 12.10.2016 / 19:53

2 answers

PHP_ Display HTML information on the page SELECT Variable returning Undefined

score 0 · Answer 1

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

score 0 · Answer 2

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

For example:

a {

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

}

a:hover {

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

}