Mil Trucos Blogger

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

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
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

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

11 Comentarios

  1. Anonymous Anonymous
    enero 28, 2014    

    esta muy bueno sirve al 100% =))

    • enero 28, 2014    

      Sirve como todo lo que publico en mi blog 🙂

      Gracias por comentar.

      Saludos

  2. enero 29, 2014    

    Hay que pegarlo asi completo? o hay que sacarle el *Quita el efecto blanco y negro* Saludos 🙂

    • febrero 4, 2014    

      Skyler eso son indicadores para que sepas a que pertenece ese código (f)

    • marzo 5, 2014    

      Es compatible con el css del zoom?porke algunos scrypts inutilizan a otros

    • marzo 13, 2014    

      Amigo Ruben es mejor que no uses ambos trucos a la vez.

  3. Anonymous Anonymous
    abril 7, 2014    

    Gracias. Es muy útil (f) (h)

  4. abril 28, 2014    

    Amigo muy buen efecto!!!!!!!
    Hay forma que funcione en firefox???
    Gracias….

  5. septiembre 30, 2014    

    Como se ve, dice “-webkit-filter:”, ya que en mi web la mayoría no utiliza Google Chrome, si no que Firefox, quiería saber si hay una solución para que el efecto funcione en otros navegadores que no sea Google Chrome, por ejemplo; -moz-filter: :v

  6. septiembre 30, 2014    

    Veo que abandonaste la antigua plantilla!, me gustaba mucho, tenía problemas, pero aquí te puedo dar una idéntica con los problemas solucionados, http://gvusion.blogspot.com/

    Insértala, es más conveniente, me gusta mucho esa plantilla, ya la he insertado en mi web: http://woodxo.blogspot.com 😀

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo