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

1
2
3
<div id="img-contenedor">
<img src="imgejemplo.jpg" alt="" />
</div>

Después debemos poner los siguientes estilos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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.

En “.img-contenedor img” nosotros podremos modificar la velocidad del efecto al cambiar “.9s” por otro tiempo.

1
2
3
4
5
6
7
.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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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Í

Comparte el post para poder descargar los archivos de la demo