Cómo hacer que las imágenes giren o se amplíen al pasar el mouse


Aprende cómo poner las imágenes o fotos de tu blog que hagan una rotación y se amplíen al pasar el ratón sobre ellos. Este efecto en CSS para imágenes funciona por separado, es decir, puedes elegir si las imágenes giren o sólo aumenten de tamaño cuando pasa el cursor.

Código CSS para girar o ampliar las imágenes

Para girar y hacer zoom en las imágenes de tu blog debes colocar este código CSS en el HTML del Blog:

.post img {padding:20px}
.post img:hover{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;transition: all 1s ease;-moz-transform: scale(1.2) rotate(-720deg) ;-webkit-transform: scale(1.2) rotate(-720deg) ;-o-transform: scale(1.2) rotate(-720deg) ;-ms-transform: scale(1.2) rotate(-720deg) ;transform: scale(1.2) rotate(-720deg);}

Si quieres hacer que funcione en todas las fotos del blog saca el extracto. post. Es posible aplicar el efecto a un gadget como el de popular Posts en el Blog.

Cómo hacer el efecto de rotar y ampliar las imágenes

Estos efectos en imágenes con CSS tienen varias posibilidades de personalización para cada fragmento de código, podrás encontrar varias veces el mismo código después cambiar todo con el mismo valor:

La velocidad del efecto, entonces la puedes cambiar con el número que quieras incluyendo el uso de números decimales por ejemplo: 0,7 s.

-720deg: la rotación de la imagen. El signo menos al principio muestra la dirección de la rotación, es decir, si quieres que gire hacia el otro lado de la marca. El número 720 son los grados de rotación que se puede modificar como lo desea, pero recuerda que 360 es una vuelta completa, es decir si usas 180 girará y deja la imagen invertida.

La escala (1.2): cambia el tamaño de las imágenes. Recuerda que esto es en IE y si pones 2 la imagen será dos veces el tamaño original.

. post img {padding: 20px}: esta parte es esencial y que debe hacer varias pruebas para ajustar el valor 20 que es el margen alrededor de la imagen.

La imagen gire y aumentan de tamaño, tal vez estaría por encima o por debajo de tu texto, blog menú o cualquier otra cosa. Así como el efecto que con cambiar el número 20 para darle suficiente espacio alrededor de la imagen.

Hay otros efectos con CSS para utilizar en tu blog y atraer más atención de los visitantes:

  • Hacer efectos en fotos de blog y fotos con CSS
  • Efectos sobre enlaces usando Gifs animados como imágenes de fondo
  • Menú horizontal con efectos en Blogger usando CSS



Esperamos que disfrutes de este consejo acerca de los efectos en las imágenes usando CSS y puedas crear efectos en las fotos de tu blog. Abrazos y éxito!

Comentarios

Entradas populares de este blog

5 alternativas open source a Loquendo

Que es microsoft silverlight

La beta de Windows 8 ya está disponible