Actualmente un efecto muy vistoso es que al pasar el mouse sobre una imagen esta tenga un efecto de zoom.
Aquí te explicare paso a paso como realizarlo.
Primero deberemos poner un contenedor a la imagen
<div id="img-contenedor">
<img src="imgejemplo.jpg" alt="" />
</div>Después debemos poner los siguientes estilos
.img-contenedor img {
-webkit-transition:all .9s ease; /* Safari y Chrome */
-moz-transition:all .9s ease; /* Firefox */
-o-transition:all .9s ease; /* IE 9 */
-ms-transition:all .9s ease; /* Opera */
width:100%;
}
.img-contenedor:hover img {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
.img-contenedor {/*Ancho y altura son modificables al requerimiento de cada uno*/
width:300px;
height:180px;
overflow:hidden;
}Y con eso quedaría listo, ahora te explicare como funciona.
Ajustes Adicionales
En «.img-contenedor img» nosotros podremos modificar la velocidad del efecto al cambiar «.9s» por otro tiempo.
.img-contenedor img {
-webkit-transition:all 1.9s ease;
-moz-transition:all 1.9s ease;
-o-transition:all 1.9s ease;
-ms-transition:all 1.9s ease;
width:100%;
}En «.img-contenedor:hover img» en scale podremos cambiar el tamaño del zoom que queremos hacer, podemos aumentar (1.5) o tambien podemos hacer que en vez de agrandar se reduzca (valores menores a 1, ejemplo: 0.25)
.img-contenedor:hover img {
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-ms-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}
/*Reducir tamaño*/
.img-contenedor:hover img {
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-ms-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
}El efecto «transform:scale» es compatible en PC desde: Firefox 16+, Safari 5+, Chrome 10+, IE9, EI10, Opera 12.1+,
y en celulares: iOS 3.2+, Android 2.1+, Blackberry 7.1+, IE Mobile 10+.
Puedes ver la demo AQUÍ
