Creați un efect de zoom pentru a ciota o imagine cu CSS

Posted on by admin

În prezent, un efect foarte colorat este că atunci când treceți mouse-ul pe o imagine acest lucru Un efect de zoom.

Aici vă voi explica pasul cu pas cum să o faceți.

Mai întâi trebuie să punem un container la imaginea

1
2
3
div >
< img src = „imgejample.jpg” alt = „/ > / div >

DIV id = „1177FAE778”

Trebuie să punem următoarele stiluri

iv id = „9746b4742c”
Div> 1
2
3
4
5
6

8
9
10

12
13
14
15
16
17
18
19

.img-container img {
-Webkit-tranziție: toate Uşura; / * Safari și crom * /
-moz-tranziție: toate .9s ușurință; / * Firefox * /
-O-TRANSITION: toate .9s ușurință; / * Adică 9 * /
-m-tranziție: toate .9s ușurință; / * Opera * /
Lățime: 100%;
}
.img-container: Hover IMG {
-Webkit-Transform: scară (1.25), -Moz-transformare: scară (1.25) ;
-m-transformare: scară (1,25);
-transformare: scară (1.25);
transforma: scară (1.25);
}
.img- container {/ * Lățimea și înălțimea sunt modificabile pentru cerința fiecărei lățime * /
: 300px;
Înălțime: 180px;
Depășiere: Ascuns;
}

și cu că aș fi gata, acum voi explica cum funcționează .

în „.img-container imbg” Putem modifica viteza efectului prin schimbarea „.9s” pentru un alt moment.

DIV id = „9a7d1bd2b”>

in „.img-container: Hover img” în scară Putem schimba dimensiunea zoomului pe care vrem să o facem, putem crește (1.5) sau putem face, de asemenea, în loc să o măriți că este redusă (valori mai mici de 1, exemplu: 0,25)

divid id = „9a7d1bdd2b”>

div id = „9746b4742c”

„transformare: scară „Efectul este compatibil pe PC de la: Firefox 16+, Safari 5+, Chr OME 10+, IE9, EI10, Opera 12,1+,
și în telefoanele mobile: iOS 3.2+, Android 2.1+, Blackberry 7.1+, adică Mobile 10 +.

Puteți vedea demo-ul aici

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

1
2
3
4
5
6
7
.img-container img {
-Webkit-tranziție: toate 1.9s ușurință; Tranziție: Toate 1,9 ușoare;
-Tranziție: Toate 1.9s ușurință;

Tranziție: Toate 1,9 ușoare;
Lățime: 100%;
}

div> 1
2
3
4
5
6

8
9
10

12
13
14
15

.img-container: Hover IMG {
-Webkit-Transform: scară (1,5);
-Moz-transformare: scară (1.5);
-m-transformare: scară (1.5), -O-transformare: scară (1,5 );
Transformare: scară (1,5);
}
/ * reduce dimensiunea * /
.img-container: Hover IMG {
-Webkit-transformare: scară (0.25),
– Moz-transformare: scară (0,25);
-m-transformare: scară (0,25);
-transformare: scară (0,25);
transforma: scară (0,25);
}