Ampliar Imagen con Movimiento usando CSS3

Ampliar Imagen con Movimiento usando CSS3

Español | Online | código | Publicación: 2023 | Pass:www.detodoprogramacion.org

Descripción:
Para ampliar las imágenes con movimiento utilizaremos css3 y 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="amplio" ) y una imagen:

Paso 1: Creamos un elemento div
<div id="amplio"> <img src="http://detodoprogramas.com/demos/slider/img/slide1.jpg" width="400" height="200" /> </div>

Paso 2: Luego escribimos el siguiente stylo CSS
<style type="text/css"> /* la imagen en su forma normal */ #amplio 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; display: block; margin-left: auto; margin-right: auto; margin-top:100px; border:none; } /* al pasar el cursor por encima SE AMPLIA*/ #amplio 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>