Cambiar de color y forma al pasar el cursor en las imágenes de las entradas

En esta entrada les enseñaré a como poner este efecto a las imágenes de las entradas logrado conCSS3. La imagen estará en blanco y negro, y al pasar el cursor dará un giro de 360 grados y al mismo tiempo cambiará a su color original.

Puedes ver como funciona en este blog de pruebas.

Nos vamos a Plantilla, Personalizar, Avanzado, Añadir CSS y ahí pegas:

.post-body img { /* Aqui le damos la orden de que solo se aplique en las entradas*/
-webkit-filter: grayscale(100%); /* Efecto Blanco y negro*/
border-radius: 2px; /* Pequeño borde en las imagenes*/
-webkit-transition: all 0.5s ease; /* Efecto suavizado para diferentes navegadores*/
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease; /* Fin del Efecto suavizado para diferentes navegadores*/
}
/* 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: 100%; /* Nos hace la imagen en circulo*/
-webkit-filter: grayscale(0%); /* Quita el efecto Blanco y Negro*/ 
-webkit-transform: rotate(360deg); /* Giro que da antes de transformase en circulo para varios navegadores*/
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg); /* Fin del Giro para diferentes navegadores*/
}