GrayScale

>>>>>>> 1º Passo:

Colem esse código entre <style type="text/css"> e </style>

#gscl{

    margin-top:0px; /* quanto ela vai pra baixo */
    margin-left:0px; /* quanto ela vai pra direita */
    border-radius:100px; /* imagen circular igual a 100, imagem quadrada só é deixar em 0 */
    height:auto; /* altura da foto */
    width:200px; /* largura da foto */
    -webkit-filter: grayscale(1); /* de 0 a 1 mais cinza ou menos */
    -webkit-transition: opacity 0.8s linear;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#gscl:hover {

    -webkit-filter: grayscale(0); /* de 0 a 1 mais cinza ou menos, pra ela voltar ao normal tem que ser 0 */
    -webkit-transition: opacity 0.8s linear;
       -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

>>>>>>> 2º Passo:

Colem esse código depois de </style> e antes de </body>

<img id="gscl" src="URL da IMAGEM que vc quer">

TUTORIAL FEITO POR AMPLAMENTE.