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

Con eso harás que todas las imágenes de tus entradas tengan ese efecto.

0
Shares

11 thoughts on “Cambiar de color y forma al pasar el cursor en las imágenes de las entradas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *