Crear efecto de zoom al hover de una imagen con 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Í

Comparte el post para poder descargar los archivos de la demo


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload the CAPTCHA.