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

En esta tutorial les enseñaré a como poner este efecto a las imágenes de las entradas logrado con CSS3. 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 la Demo

Vamos a plantilla » Personalizar » Avanzado » Buscamos la opcion  Añadir CSS, luego pegamos el siguiente código:

.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*/

}

Con esto lograras un buen efecto con las  imágenes de las entradas de tu blog.