Créer un effet de zoom pour survoler une image avec CSS

Posted on by admin

Actuellement un effet très coloré est que lorsque vous passez la souris sur une image, cela a Un effet de zoom.

ici, je vais expliquer étape par étape Comment le faire.

Nous devons d’abord mettre un conteneur à l’image

1
3
 » cc35bde « >

div >

img src = « imgejample.jpg » alt = «  » / >

/ div> / div> / div> / div> / div = « dbd58d9333″>

Nous devons mettre les styles suivants

1
2
3
4
5
6
8
9
10

13
14
15
16
17
18
19

.Img-conteneur img {
-WebKit-transition: Tous .9s Facilité; / * Safari et chrome * /
-MOZ-TRANSITION: TOUTES LA FACILISATION; / * Firefox * /
-O-TRANSITION: ALL .9S FACILE; / * Ie 9 * /
-MS-TRANSITION: TOUTES LA FACILITÉE; / * Opéra * /
Largeur: 100%;
}
Conteneur: Hover img {
-WebKit-Transform: échelle (1.25), -MOZ-Transform: échelle (1.25) ;
-MS-Transform: échelle (1,25);
-O-transformer: échelle (1.25); Transformation de
: échelle (1.25);
}
Conteneur {/ * La largeur et la hauteur sont modifiables à l’exigence de chacune de chacune * /
largeur: 300px;
Hauteur: 180px;
Dépouillement: caché;
}

et avec ce que je serais prêt, je vais maintenant expliquer comment ça fonctionne .

dans « IMG-conteneur » « Nous pouvons modifier la vitesse de l’effet en modifiant » .9s « pour une autre fois.

in « .Img-conteneur: survolez IMG » à l’échelle Nous pouvons modifier la taille du zoom que nous souhaitons faire, nous pouvons augmenter (1.5) ou nous pouvons également le rendre au lieu d’agrandir qu’il est réduit (valeurs inférieures à 1, exemple: 0,25)

<9746B4742C ">

 » 1177fae778 « >

 » Transform: échelle « L’effet est compatible sur le PC à partir de: Firefox 16+, Safari 5+, CHR OME 10+, IE9, EI10, Opera 12.1+,
et dans les téléphones cellulaires: iOS 3.2+, Android 2.1+, BlackBerry 7.1+, Ie Mobile 10 +.

Vous pouvez voir la démo ici

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

1
2
3
5
6

.Img-conteneur img {
-WebKit-transition: toutes les 1,9s facilité;
-MOZ- Transition: toutes les 1,9s facilité;
-O-transition: toutes les 1,9s facilité;
-Ms-transition: toutes les 1,9s facilité;
largeur: 100%;
}
1
2
3
4
5
6

8
9
10

12
13
14
15

.Img-conteneur: Hover img {
-WebKit-Transform: échelle (1.5);
-Moz-Transform: échelle (1.5);
-MS-Transform: échelle (1.5), -o-transformation: échelle (1.5 );
transformer: échelle (1.5);
}
/ * réduire la taille * /
.Img-conteneur: Hover img {
-WebKit-Transform: échelle (0,25),
– Moz-Transform: échelle (0,25);
-MS-Transform: échelle (0,25);
-O-transformer: échelle (0,25); Transformation: échelle (0,25);
}