Header Ads

Agrandar las Imagenes del Blog al Pasar el Mouse

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.

Codigo CSS para agrandar las imagenes al pasar el mouse

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!







5 comentarios:

  1. No sabrías como darle un efecto de sombra u opacidad al enlace de salto de línea? Salvo que en mi caso no es un enlace que dice "Leer más", yo lo he cambiado por una imágen, y a esta imágen quiero darle un efecto cuando se pasa el puntero por encima. Un efecto similar al de las páginas de descargas cuando apuntas en el botón "Descargar". Espero me entiendas mi solicitud y me puedas brindar una pronta respuesta. Saludos.

    ResponderEliminar
  2. gracias por esta ayuda, lo unico que queria comentar es que a mi me sirvio muy bien, pero no lo puse en css, lo tuve que poner como un estilo.

    ResponderEliminar
    Respuestas
    1. Hola Lancer me alegra que te aya servido, no importa como lo apliquemos la aplicación en conclusión resulta la misma. Saludos y Gracias por Comentar!

      Eliminar
  3. tengo una galeria de imagenes, tendria que colocar en el html la referencia del class a cada imagen?

    ResponderEliminar
  4. Buenas noches, no sé la razón pero la imagen inicial me la quita de la posición centrada y las coloca a la izda.
    Gracias

    ResponderEliminar