{Css Soldier}

CSS, HTML, JAVASCRIPT, Trucos, Tutoriales & Plantillas Blogger.

Efecto al pasar el cursor en las imágenes de las entradas: "Cambio de color y de forma"


Lo que haremos el día de hoy sera agregar un efecto genial a nuestras imágenes que tengamos en las entradas, la imagen estará en blanco y negro pero cuando se pase el cursor sobre esta dará un giro de 360 grados dejándonos la imagen en forma circular y a colores. Esto se logra gracias a Css3 y como estos hay mas efectos que iremos publicando poco a poco en el blog.

Puedes ver un demo con mas ejemplos en diferentes tipos de imágenes en este blog de pruebas:


¿Te gusta? Bien vamos a aplicarlo que es muy fácil!!!

1.- Nos vamos a Plantilla > Personalizar > Opciones Avanzadas > y hasta abajo encontramos la opción de "Agregar Css"

2.- Una vez estando ahí vamos a pegar los siguientes estilos en CSS3 :

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

3.- Aplicamos al Blog y ya podemos ver inmediatamente nuestro nuevo efecto.

Con esto debemos de tener todas las imágenes de nuestras entradas con este efecto.

Ahora les explicare un poco como funcionan los estilos que aplicamos para que puedan personalizarlos a su gusto:


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



6 comentarios:

  1. Hola! Como seria si en vez de blanco y negro quisiera imagenes con efectos tipo instagram? es decir con filtros como los de instagram? O por ejemplo agregarles algo de opacidad, para darles un toque mas vintage? Me podrias decir? Gracias mil de antemano

    ResponderEliminar
    Respuestas
    1. Hola "Minori G." creo que el efecto que buscas es el "Sepia" entonces solo debes cambiar en el código anterior la parte donde dice "grayscale" (que es donde nos indica que el efecto sera en blanco y negro) se cambiara a "sepia" en ambos estilos (uno que muestra y otro que oculta) quedando de la siguiente manera:

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

      reemplaza el código anterior por el que querías.

      Espero sea lo que buscas. Saludos!

      Eliminar
  2. a mi no me sale en blanco y negro... que puede pasar?

    ResponderEliminar
    Respuestas
    1. Es tu navegador, usa Opera o Google Chrome y te funcionara a la perfeccion

      Eliminar
  3. Holaaa se podría añadir este efecto pero en vez de en todas las fotos del blog sólo en las imágenes de una entrada en concreto? mil gracias

    ResponderEliminar