Criar Zoom Efeito de pairar de uma imagem com CSS - Miguel Manchego

Atualmente, um efeito muito colorido é que quando você passa o mouse sobre uma imagem isto tem um efeito de zoom.

Aqui eu vou explicar passo a passo como fazê-lo.

primeiro temos de colocar um recipiente para a imagem

1 | 2 | 3

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

Devemos colocar os seguintes estilos

1 | 2 | 3 4
5
6
8
9
10
12
13
14
15
16
17
18
19

.img-contenter img {
-webkit-transition: todos .9s Facilidade; / * Safari e Chrome * /
-moz-transição: todos .9s facilidade; / * Firefox * /
-O-transição: todos .9s facilidade; / * IE 9 * /
-MS-TRANSIÇÃO: ALL. 9S FACLE; / * Opera * / Tablet Largura: 100%;
}
Img-recipiente: Passe img {
-webkit-Transform: Escala (1,25), -moz-Transform: Escala (1,25) ;
-MS-Transform: Escala (1,25);
-O-Transform: Escala (1,25);
Transform: Escala (1,25);
}
.img- Recipiente {/ * largura e altura são modificáveis com a exigência de cada um * / Tablet width: 300px;
HEIGHT: 180px;
overflow: hidden;
}

E com isso eu estaria pronto, agora vou explicar como ele funciona .

Em “.img-container img” podemos modificar a velocidade do efeito alterando “.9s” para outra altura.

em “.img-container: Hover img” na Escala podemos mudar o tamanho do zoom que nós queremos fazer, podemos aumentar (1,5) ou também pode torná-lo Em vez de ampliação que é reduzida (valores menores do que 1, Exemplo: 0,25)

1 | 2 | 3 4
5
6
7

.img-container img {
-webkit-Transição: Todos de 1.9 Facilidade;
-moz- transição: Todos de 1.9 Facilidade;
-O-transição: Todos de 1.9 Facilidade;
-MS-transição: Todos de 1.9 Facilidade;
Largura: 100%;
}

1 | 2 | 3 4
5
6
8
9
10
12
13
14
15

.img-container: pairar img {
-webkit-Transform: Escala (1,5);
-moz-Transform: Escala (1,5);
-MS-Transform: Escala (1,5), -O-Transform: Escala (1,5 );
Transformada: Escala (1,5);
}
/ * Reduzir o tamanho do * / Tablet Img-recipiente: Passe img {
-webkit-Transform: Escala (0,25),
– Moz-Transform: Escala (0,25);
-MS-Transform: Escala (0,25);
-O-Transform: Escala (0,25);
Transform: Escala (0,25);
}

A “Transformação: Escala “efeito é compatível com PC a partir de: Firefox 16+, Safari 5+, Chr Ome 10+, ie9, ei10, ópera 12.1+, e em telefones celulares: ios 3.2+, android 2.1+, blackberry 7.1+, ou seja, móvel 10 +.

Você pode ver a demonstração aqui

Deixe uma resposta Cancelar resposta