martes, 23 de noviembre de 2010

Ampliar imágenes con Css 3

Para ampliar imágenes con movimiento en css3 utilizaremos dos propiedades, la transform y la transition. La forma de utilizarlas es muy sencillo, en este caso también será diferente dependiendo del navegador. Las clases básicas de Css3 son: -o- (para Opera), -moz- (para Mozilla) y -webkit-.
En el código HTML insertaremos dentro de un DIV (con id="ampliar" ) y una imagen:
<div id="ampliar">
<img src="banner_html5_2.jpg" width="168" height="91" />
</div>
Ahora crearemos la animación y ampliaremos la imagen con un codigo muy simple, utilizando transform:scale(2) (para modificar tamaño) y duration: 0.5s (modificar el tiempo que tarda). Para acerlo más bonito hemos añadido la propiedad opacity, el codigo sería el siguiente:
<style type="text/css">
/* la imagen en su forma normal */
#ampliar img{
-webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.5;
}
/* al pasar el cursor por encima SE AMPLIA*/
#ampliar img:hover{
-webkit-transform:scale(2); /*Webkit:Modificamos tamaño a escala*/
-moz-transform:scale(2); /*Mozilla:Modificamos tamaño a escala*/
-o-transform:scale(2); /*Opera:Modificamos tamaño a escala*/
-webkit-transition-duration: 0.5s; /*Webkit:Duración de la animación*/
-moz-transition-duration: 0.5s; /*Mozilla:Duración de la animació*/
-o-transition-duration: 0.5s; /*Opera:Duración de la animació*/
opacity: 1;
}
</style>

Nuevo!
para ie9, ie10 y ie11 es:
-ms-transform:scale;

Para ver el ejemplo en vivo haga click en el siguiente botón:
No olvide escribir su comentario!!!

15 comentarios:

  1. Muy bonito pero la animación solo me funcionó en google chrome pues en mozilla amplia pero no tiene la animación y en mi internet explorer no hace nada de nada como era de esperarse.

    ResponderEliminar
  2. Yo tampoco he conseguido que la animación funcione en mozilla. Pero que le vamos hacer... para que funcione en todos los navegadores tendríamos que buscar otros métodos.
    Gracias :D

    ResponderEliminar
  3. Link resubido, muchas gracias por avisar :)

    ResponderEliminar
  4. A mi me funciona tanto en Chrome como en Mozilla, pero necesito que me funcione en IE, ¿alguien me puede decir como?

    ResponderEliminar
  5. Victor en primer lugar muchas gracias por la aportacion. Funciona muy bien aunque no se si es posible que amplie en el centro de la pantalla al pasar el cursor y no sobre la posicion de la imagen.

    Espero que puedas ayudarme.

    ResponderEliminar
  6. Vaya, a pesar de leer los comentarios que decían que solo funcionaba en Google Chrome, lo puse en práctica en Safari (de Mac) y me funcionó estupendamente,
    muchísimas gracias por el tutorial, me servirá de mucho para un diseño más chulo en la web :P

    ResponderEliminar
  7. gracias por el aporte estaba buscando esto hace rato

    ResponderEliminar
  8. Muy interesante!!! Y como desdeJavaScriptse puede acceder a las propiedades "style" de los elementos, se podría hacer que eso mismo pase para otros eventos (pulsar un botón, etc). A día de hoy lo he probado en Firefox, Chrome y Opera, y funciona en los tres. En el IExplorer no sé, porque soy usuario de Linux yno tengo esas porquerías en mi ordenador...
    Gracias por el aporte!!!!

    ResponderEliminar
  9. Hola!!!
    el efecto es fantástico, me gusta, ya lo he implementado en mi blog, pero al pasar el raton sobre la imagen esta pierde calidad, alguien sabe como solucionarlo.
    saludos
    Pau

    ResponderEliminar
  10. Respuestas
    1. Muchas gracias! Lo he añadido al Post.

      un +1 nos ayuda a todos!

      Eliminar
  11. felicitaciones, gran tutorial fácil de entender y bien explicado

    ResponderEliminar