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!!!