Como poner el efecto de color a blanco y negro de tus imágenes al pasar el ratón o mouse

Para que cambie de color a blanco y negra o al reves al pasar el ratón:

.post-body img { /* Le damos la orden de que solo se aplique en las entradas*/
-webkit-filter: grayscale(0%);  /* Imagen original a color */
}
  /* Efectos al pasar el cursor sobre la imagen*/
.post-body img:hover {   /* Da la orden que se aplique al pasar el cursor dentro de las imagenes de las entradas*/
 border-radius: 0%;   /* Nos hace la imagen en circulo*/
 -webkit-filter: grayscale(100%);   /* Pone el efecto Blanco y Negro*/
}

Si queremos que de una vuelta y cambie de color al pasar el ratón:

.post-body img {
-webkit-filter: grayscale(0%);
-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;
}
.post-body img:hover {
 border-radius: 0%;
 -webkit-filter: grayscale(100%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}