Crear efecto de zoom al hover de una imagen con CSS

por | Mar 18, 2015 | CSS

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Í

[social-download button_id=»39b199bed60f23039″ dl_id=»file:///C:/wamp/www/blogmiguel/zoomeffect/ejemplozoom.zip» theme=»blue» message=»Comparte el post para poder descargar los archivos de la demo» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=» @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]