Gray Scale cross browser

Asked

Viewed 39 times

0

Personal I’m wanting to put a filter Grayscale in some images it works only in Google Chrome and Opera and does not work in Mozila or Safari.

Follows the css:

.parceiros li a img{
    margin-top: 5%;
     -webkit-filter: grayscale(100%);    
   -moz-filter: grayscale(100%);    
   -ms-filter: grayscale(100%);    
   -o-filter: grayscale(100%);
   }


.parceiros li a img:hover{
     -webkit-filter: grayscale(0);    
   -moz-filter: grayscale(0);    
   -ms-filter: grayscale(0);    
   -o-filter: grayscale(0);
   }
css3

1 answer

2


Try it like this:

.parceiros li a img{ 
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);  /* For Webkit browsers */
  filter: gray;  /* For IE 6 - 9 */
  -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}

.parceiros li a img:hover { 
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none;
}

You can modify or remove the transition time, put . 6s of example;

Jsfiddle example

  • then I have read my post I forgot to put the Hover and so I function your way however yes the safari has not accepted and the mozila has accepted however it does not work the hotel

  • Forehead now there.

  • Yes friend I work the Hover that was missing however the only one who did not accept anything still was the safari the mozila was missing however it is catching more the safari has no idea what it can be

  • What OS and what version of safari are you using? I have run the tests here on OS X Yosemite with Safari 8.0, it worked normally because it uses the -Webkit prefix.

  • use of windows and safari 5.1.7

  • Hum.. is the version of your Safari. The filter property of css, 7+ http://caniuse.com/#feat=css-Filters support

  • Take a look at this: http://stackoverflow.com/questions/12685794/grayscale-image-with-css-on-safari-5-x

  • minutes I understood then somehow it worked here again brigade =3

  • You’re welcome (Y) to stay!

Show 4 more comments

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.