Ir al contenido principal

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

Loquendo es un programa que no necesita mucha presentación, principalmente porque lleva algo de tiempo entre nosotros y que en varias ocasiones, considero, que nos ha sido de gran ayuda al realizar vídeo tutoriales o bien algún proyecto educativo.
Loquendo se ha popularizado aún más en estos últimos años debido a que es utilizado por el popular colectivo Anonymus, para dar a conocer sus actividades.
En está ocasión les comparto 5 alternativas libres a este populoso programa.

Que es microsoft silverlight

Si entras a la pagina de Microsoft, o lees algun blog o revista sobre informática, encontrarás este nuevo término: Silverlight. Inclusive los gamers se verán envueltos por esta ola de novedades, pues la publicación del sitio de Halo 3 , uno de los juegos mas populares de Xbox, se hizo utilizando Silverlight para colocar videos en alta definición sobre trailers y escenas del juego.

Pero que es? para que sirve? quienes lo usan? Aca te dejo una simple pero clara definición, que encontré blogueando un poco.


Silverlight es un plugin que se instala en el navegador web, que en este caso significa Internet Explorer 6 o superior, Netscape 6+, Firefox 1.5+ en Windows XP y Vista; para Macintosh, Silverlight es soportado por Safari y Firefox. El plugin pesa algo así como 1.4 Mb.Silverlight es una versión reducida del framework de .NET (¡el framework completo de .NET es de 40+Mb!) enfocada a eficientar el manejo de multimedia dentro del navegador: video, audio, animación, interactividad, etc.Uno …

La beta de Windows 8 ya está disponible

La primera beta para usuarios de Windows 8, que ha recibido el nombre de Consumer Preview, ya puede descargarse desde la página de la compañía. Microsoft aprovechó el Mobile World Congress que se celebra en Barcelona para presentar este sistema operativo, que utilizará la nube para sincronizar la experiencia entre distintos dispositivos. La versión para desarrolladores (Developer Preview) deWindows 8 estaba disponible desde septiembre de 2011 y desde entonces ha sido descargada más de