Agrandar las Imagenes del Blog al Pasar el Mouse

En una entrada anterior aprendimos como aumentar el tamaño de nuestras entradas al pasar el Mouse, en esta entrada aprenderemos algo similar pero esta ves lo aplicaremos a las imágenes de nuestras Entradas, de esta forma tendrán un singular animación, que las ara un poco mas llamativas. 

Agrandar las Imágenes del Blog al Pasar el Mouse:

Si se habrán dado cuenta en la imagen de arriba, esta tiene un efecto que al pasar el mouse aumenta su tamaño, todo esto lo logramos con un poco de CSS3, y es lo que aprenderemos a hacer en esta entrada y como añadirlo a nuestro Blog.

Para empezar el código que hace posible este tipo de animación es el siguiente:

 
.post-body img
{
   display:block!important;
   -webkit-transition:-webkit-transform 1s ease-out;
   -moz-transition:-moz-transform 1s ease-out;
   -o-transition:-o-transform 1s ease-out;
   -ms-transition:-ms-transform 1s ease-out;
   transition:transform 1s ease-out;
}

.post-body img:hover
{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1)
}

Explicación breve del código:

Seleccionamos la Clase que identifica a las entradas de nuestro Blog, .post-body, pero para que el código tenga efecto en las imágenes también tenemos que añadir a la etiqueta img en conclusión: .post-body img, Ahora para que la animación funcione al pasar el Mouse sobre la imagen hacemos un hover: .post-body img:hover

Una ves que identificamos las clases usamos la propiedad transition y transform de CSS3 que nos da el efecto de aumento en nuestras imágenes al pasar el mouse sobre ellas, esto lo podemos observar en el código.

Si deseamos modificar el tamaño de aumento solo cambiamos los numeros en el atributo scale de la propiedad transform, si queremos cambiar la velocidad de la animación solo cambiamos los números en el atributo transform de la propiedad transition

¿Donde pegar el código CSS ?

Para que con el código funcione y nuestras imágenes tengan el efecto animado de aumentar al pasar el Mouse, tenemos que  pegar dicho código en la opción añadir CSS de la herramienta de plantilla Personalizada de Blogger.

Una ves que ayeamos pegado el Código solo damos en la opción aplicar al Blog y ya tendremos el efecto de animación que hace que nuestras imágenes se agranden al pasar el mouse en todas nuestras entradas.

Espero que esta Entrada les sea de mucha utilidad, cualquier duda o Aporte pueden hacerlo por comentarios. Gracias por su Tiempo!