How to get Grayscale in css: hover

Navigation
1

Hello I put a gray scale on an image, I wanted to know how to take this effect when I put the mouse over the image ... 

.grayscale{background:url(yourimagehere.jpg);-moz-filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(100%);
     filter: gray;
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 }
    
asked by anonymous 18.03.2016 / 19:43

1 answer

2

Try this: 

.grayscale:hover {
   -moz-filter: initial;
   -o-filter: initial;
   -webkit-filter:initial;
   filter: initial;
}

Running on jsfiddle: link

    
18.03.2016 / 19:50
How to receive by parameter an array of objects of another class in Java? Align image next to horizontal menu