Actualment un efecte molt vistós és que a el passar el ratolí sobre una imatge aquesta tingui un efecte de zoom.
Aquí et explicaré pas a pas com realitzar-lo.
Primer haurem de posar un contenidor a la imatge
|
1 de febrer de 3 de
|
< div > a < img src = “imgejemplo.jpg” alt = “” / > a < / div >
|
Després hem de posar els següents estils
|
1 de 2 de març de 4 de maig de 6 de juliol de 8 de setembre de 10 de novembre de 12
13 de 14 de 15 de 16 de 17 de 18 de 19 de |
.img-contenidor img {a -webkit-transition: all .9s ease; / * Safari i Chrome * / a -moz-transition: all .9s ease; / * Firefox * / a -o-transition: all .9s ease; / * IE 9 * / a -MS-transition: all .9s ease; / * Opera * / a width: 100%; a} a .img-contenidor: hover img {a -webkit-transform: scale (1.25);
-moz-transform: scale (1.25); -MS-transform: scale (1.25); -o-transform: scale (1.25); transform: scale (1.25); } a .img- contenidor {/ * Ample i altura són modificables a el requeriment de cada un * / a width: 300px; height: 180px; a overflow: hidden; a} |
I amb això quedaria llest, ara et explicaré com funciona.
a “.img-contenidor img” nosaltres podrem modificar la velocitat de l’efecte a l’canviar “.9s” per un altre temps.
|
1 de 2 de març de 4 de 5 de juny
7 de |
.img-contenidor img {a -webkit-transition: all 1.9s ease; a -moz-transition: all 1.9s ease ; a -o-transition: all 1.9s ease; a -MS-transition: all 1.9s ease; a width: 100%; a}
|
|
1 de 2 de març de 4 de maig de 6 de juliol de 8 de setembre
10 de novembre de 12 de 13 de 14 de 15 de |
.img-contenidor: hover img {a -webkit-transform: scale (1.5);
-moz-transform: scale (1.5); -MS-transform: scale (1.5); -o-transform: scale (1.5); transform: scale (1.5); } a / * Fer més petit * / a .img-contenidor: hover img {a -webkit-transform: scale (0.25); a – moz-transform: scale (0.25); -MS-transform: scale (0.25); -o-transform: scale (0.25); transform: scale (0.25); a} |
L’efecte “transform: scale” és compatible en PC des de: Firefox 16+, Safari 5+, Chr ome 10+, IE9, EI10, Opera 12.1+, venda i en cel·lulars: iOS 3.2+, Android 2.1+, Blackberry 7.1+, IE Mobile 10 +.
Pots veure la demo AQUÍ