How to take out Grayscale in css :Hover

Asked

Viewed 113 times

1

Hello I put a grayscale on an image, wanted to know how to take this effect when I put the mouse on top of the image...

inserir a descrição da imagem aqui

 .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");
 }
css

  • Already tried to put "Transparent" in all properties in . Grayscale:Hover?

1 answer

2


Try it this way: 

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

Running on jsfiddle: https://jsfiddle.net/94dq2eds/5/

Browser other questions tagged css

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