Comment zoomer une image sur la souris survole en utilisant CSS

Le CSS "transition»La propriété est utilisée pour ajouter des effets sur les différents éléments HTML, tels que la modification de la largeur, de la hauteur, de la taille et de la position des éléments. En utilisant cette propriété, vous pouvez également zoomer une image sur la souris en survol de la combinaison de la propriété Transform et: élément de pseudo-classe.

Le but de cet article est de vous enseigner la procédure de zoom sur une image sur un survol d'une souris. Alors, commençons!

Comment zoomer une image sur la souris survole en utilisant CSS?

Le "transition" et "transformer«Les propriétés de CSS sont utilisées pour zoomer une image sur un plan de souris. Avant de sauter dans la mise en œuvre, nous discuterons des propriétés mentionnées une par une!

Propriété CSS «Transition»

Le "transition»La propriété est utilisée pour modifier la valeur des propriétés CSS telles que la largeur, la hauteur, l'opacité et la transformation dans un délai spécifique. C'est une propriété scoris de quatre autres propriétés.

Découvrez la syntaxe de la propriété de transition.

Syntaxe

transition: durée de transition de la transition de transition
transition de transition de transition

La description des propriétés mentionnées ci-dessus est donnée ci-dessous:

• property de transition: Il est utilisé pour définir la transition vers n'importe quelle propriété CSS, telle que la largeur, la hauteur, l'opacité, la transformation et bien d'autres.

• durée de transition: Il est utilisé pour ajuster la durée de la transition.

• transition-timering-fonction: Il est utilisé pour définir la vitesse de la transition.

• retarder la transition: Il spécifie lorsque la transition commence ou retarde.

Propriété CSS «Transformer»

Pour la transformation 2D et 3D des éléments HTML, la propriété «transformée» de CSS est utilisée. En utilisant cette propriété, vous pouvez modifier la forme et la taille des éléments. Il permet également à un élément de tourner, de biaiser et de faire évoluer.

Syntaxe

La syntaxe du «transformer»La propriété est:

transformée: Aucune | Transform-fonctions

La description de la propriété de transformation est donnée ci-dessous:

• aucun: Il est utilisé pour définir aucune transformation des éléments.

• transformité: Il est utilisé pour définir la fonction de la propriété de transformation telle que rotate (), skew (), tradlate () et échelle (). De plus, la fonction Scale () redimensionne l'élément dans des directions horizontales et verticales.

Exemple 1: Zoom Une image sur la souris survole

Pour zoomer une image sur un survol de la souris, ajoutez d'abord une image dans le HTML, puis appliquez l'effet de survol.

Étape 1: Ajouter l'image en div

Pour zoomer une image sur la souris en utilisant CSS, nous allons d'abord ajouter une image dans le «div". Pour ce faire, utilisez la balise et définissez la source de l'image comme "image.png ” à l'intérieur de .

Html

Étape 2: Style Div

Dans CSS, nous utiliserons "div«Pour accéder à la div, nous avons créé en HTML, définissez la hauteur de la div comme«250px"Et la couleur d'arrière-plan comme"RVB (134, 240, 227)". De plus, nous ajusterons la bordure autour de la div en réglant la largeur comme «10px», style comme «crête» et couleur comme «RVB (2, 141, 127)».

CSS

div
hauteur: 250px;
Contexte: RVB (134, 240, 227);
Border: 10px Ridge RVB (2, 141, 127);

Étape 3: Définissez la position de l'image et appliquez une propriété de «transition»

À l'étape suivante, définissez la position de l'image en utilisant le rembourrage comme «80px» et «160px». Nous utiliserons la largeur comme «150px«Pour ajuster la taille de l'image. Après cela, appliquez la propriété de transition à l'image en définissant la valeur de la propriété de transition comme «transformation» et durée de transition comme «0»:

img
rembourrage: 80px 160px;
Largeur: 150px;
transition: transform 0s;

Remarque: les valeurs du rembourrage sont définies comme «80px»Représente le rembourrage en haut et en bas, et«160px»Indique le rembourrage de gauche et de droite.

Étape 4: Zoomez une image en utilisant la propriété «Transformer» en survol

Maintenant, nous allons utiliser ".IMG: planant”Pour lier l'image à l'élément de pseudo-classe de survol. En conséquence, un volant sera appliqué à l'image. Ensuite, pour zoomer une image sur le survol de la souris, nous utiliserons la propriété de transformation et définirons la valeur de la fonction d'échelle comme «(1.9)«Pour redimensionner l'image dans les directions horizontales et verticales:

IMG: Hover
Transformer: échelle (1.9);

Comme vous pouvez le voir que l'image est zoomée lorsque la souris dessus:

Passons à l'exemple suivant, dans lequel nous allons zoomer un gif sur la souris en survol.

Exemple 2: Zoom un gif sur la souris survole

Tout d'abord, nous ajouterons un GIF dans le HTML en utilisant la balise et spécifiez sa source GIF comme «Gif.gif»:

Nous allons styliser la div le même que l'exemple précédent. Après cela, définissez la position du GIF en utilisant le rembourrage comme «50px" et "200px»:

img
rembourrage: 50px 200px;
Largeur: 150px;
transition: transform 0s;

Ensuite, nous allons utiliser "IMG: planant»Et définissez la valeur de la fonction d'échelle comme«1.6»:

IMG: Hover
Transformer: échelle (1.6);

Ce faisant, le GIF fera du zoom-in lorsque vous souris dessus:

C'est ça! Nous avons discuté de la méthode de zoom sur une image sur la souris en survol de la souris.

Conclusion

Pour zoomer une image sur un survol de la souris «Transition» et «Transformer» Les propriétés de CSS sont utilisées. Tout d'abord, appliquez la propriété de transition sur l'image et définissez la valeur comme transformée. Puis dans le «:flotter”Élément pseudo-classe, utilisez la propriété de transformation et définissez la valeur de la fonction SCALE (). Dans ce manuel, nous avons appris la méthode pour zoomer une image sur la souris en utilisant CSS et en fournir des exemples.