Efeito grayscale

Este efeito é aquele que quando a gente passa o mouse na foto colorida ela fica preta e branca.


1- Cole esse código no CSS:

.border1 {background:#fff; 
padding:1px; 
border:5px solid #df8db9;
margin:1px; 
-webkit-transition-duration: .99s; 
-moz-transition-duration: .99s;}

.border1:hover {filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
border:5px solid #df8db9;}

2- Agora onde quer que apareça a foto:

<img src=”LINK DA IMAGEM AQUI” width=”60” align=”left” class=”border1”>

Não esqueça de substituir as apas.