Gray scale cross browser

Navigation
0

Follow 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);
   }
    
asked by anonymous 21.05.2015 / 15:45

1 answer

2

Try 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 example .6s

JSFiddle Example

    
21.05.2015 / 15:49
Delete ListView item Problems retrieving data from Mysql