Attualmente un effetto molto colorato è che quando passa il mouse su un’immagine Un effetto zoom.
Qui spiegherò passo dopo passo come farlo.
Prima dobbiamo mettere un contenitore per l’immagine
|
1
2 3 1 2 > |
div >
< img src = “imgejample.jpg” ALT = “” / > < / DIV > |
Dobbiamo mettere i seguenti stili
|
1
2 3 4 5 6 8 13 |
.IMG-CONTAINER IMG {
-Webkit-Transition: Tutto .9s Facilità; / * Safari e Chrome * / -Moz-Transition: Tutto .9s Facilità; / * Firefox * / -O-Transition: tutti .9s facilità; / * Cioè 9 * / -ms-Transition: tutto .9s facilità; / * Opera * / Larghezza: 100%; } .Img-container: Hover img { -Webkit-Transform: Scala (1.25), -Moz-Transform: Scala (1.25) ; -ms-trasforma: scala (1,25); -O-trasformazione: scala (1.25); trasformazione: scala (1.25); } .Img- contenitore {/ * Larghezza e altezza sono modificabili al requisito di ciascuna * / Larghezza: 300 px; Altezza: 180 px; Overflow: Hidden; } |
E con quello sarei pronto, ora spiegherò come funziona .
In “.IMG-CONTAINER IMG” possiamo modificare la velocità dell’effetto cambiando “.9s” per un’altra volta.
|
1
2 3 4 5 6 7 |
.IMG-CONTAINER IMG { -Webkit-Transition: Tutto 1.9 Allenabile; -Moz- Transizione: Tutto 1.9s Allegoli; -O-Transizione: Tutto 1.9s Facilità; -ms-Transition: Tutto 1.9s Facilità; Larghezza: 100%; |
|
1
2 3 4 5 6 8 12 |
.IMG-CONTAINER: Hover img {
-Webkit-Transform: Scala (1.5); -Moz-Transform: Scala (1.5); -ms-trasformazione: scala (1.5), -o-trasformata: scala (1.5 ); Trasforma: scala (1.5); } / * Riduci dimensioni * / .IMG-CONTAINER: Hover img { -Webkit-Transform: Scala (0,25), – Moz-trasformazione: scala (0,25); -ms-trasformata: scala (0,25); -O-trasformata: scala (0,25); trasformazione: scala (0,25); } |
la “trasformazione: scala “L’effetto è compatibile su PC da: Firefox 16+, Safari 5+, Chr OME 10+, IE9, EI10, OPERA 12.1+,
e nei telefoni cellulari: iOS 3.2+, Android 2.1+, Blackberry 7.1+, IE Mobile 10 +.
Puoi vedere la demo qui