Crear efecto de zoom para pasar unha imaxe con CSS

Actualmente un efecto moi colorido é que cando pase o rato sobre unha imaxe que ten un efecto de zoom.

Aquí vou explicar paso a paso como facelo.

Primeiro debemos poñer un recipiente á imaxe

1
2
3

DIV >
< img src = “imgejample.jpg” alt = “” / >
< / div >

Debemos poñer os seguintes estilos

1
2
3
4
5
6

8
9
10

12
13
14
15
16
17
18
19

.Img-conteneder img {
-webkit-transition: todos os .9s Facilidade; / * Safari e Chrome * /
-Moz-Transition: Todas as facilidades; / * Firefox * /
-O-Transition: Todas as persoas .9S; / * É dicir, 9 * /
-ms-transición: todo .9s facilidade; / * Ópera * /
Ancho: 100%;
}
.Img-Conteder: Hover img {
-Webkit-Transform: Escala (1.25), -Moz-Transform: Escala (1.25) ;
-ms-Transform: Escala (1.25);
-O-Transform: Escala (1.25);
Transformación: Escala (1.25);
}
.Img- Contenedor {/ * O ancho e a altura son modificables ao requisito de cada un * /
Ancho: 300px;
Altura: 180px;
Overflow: Hidden;
}

e con iso estaría listo, agora vou explicar como funciona .

en “.Img-conteneder img” Podemos modificar a velocidade do efecto cambiando “.9s” por outro tempo.

en “.Img-conteneder: hover img” en escala Podemos cambiar o tamaño do zoom que queremos facer, podemos aumentar (1,5) Ou tamén podemos facelo en lugar de ampliar que se reduce (valores menores de 1, exemplo: 0.25)

1
2
3
4
5
6 r / 7

.Img-conteneder img {
-webkit-transition: Todas as facilidades de 1.9s; -moz- Transición: Todas as facilidades de 1.9S;
-O-Transition: Todas as facilidades de 1.9S; -ms-Transition: Todas as 1.9s facilidade;
WIDTH: 100%;
}

1
2
3
4
5
6

8
9
10

12
13
14
15

.Img-recipiente: Hover img {
-Webkit-Transform: Scale (1.5);
-Moz-Transform: Escala (1,5);
-ms-Transform: Escala (1.5), -O-Transform: Escala (1,5 );
Transformación: escala (1.5);
}
/ * Reducir tamaño * /
.Img-recipiente: Pase IMG {
-Webkit-transform: escala (0.25),
– MOZ-TRANSFORM: SCALE (0.25);
-ms-Transform: Scale (0.25);
-O-Transform: Escala (0,25);
Transformación: Escala (0,25);
}

a “transformación: escala “O efecto é compatible con PC desde: Firefox 16+, Safari 5+, Chr Ome 10+, IE9, EI10, OPERA 12.1+,
e en teléfonos móbiles: iOS 3.2+, Android 2.1+, BlackBerry 7.1+, é dicir, móbil 10 +.

Podes ver a demostración aquí

Deixa unha resposta Cancelar a resposta