Maison > interface Web > tutoriel CSS > 2020-05-28 - Comment redimensionner une image au survol de la souris en utilisant CSS ?

2020-05-28 - Comment redimensionner une image au survol de la souris en utilisant CSS ?

A 枕上人如玉、
Libérer: 2020-05-29 11:24:48
original
320 Les gens l'ont consulté

L'effet de zoom d'image est un effet d'application qui zoome sur l'image lorsque la souris est survolée ou cliquée. Cet effet est principalement utilisé sur les sites Web. Cet effet est utile dans les situations où nous souhaitons afficher les détails de l'utilisateur sur une image.
Il existe deux manières de créer des effets de survol de la souris.

Utiliser JavaScript

Utiliser CSS

Dans cet article, nous verrons comment utiliser CSS pour obtenir cet effet. Cet article contient deux parties de code. La première partie contient du code HTML et la deuxième partie contient du code CSS. Code HTML : dans cet article, nous utiliserons HTML pour créer la structure de base de la mise à l'échelle des images lors de l'effet de survol.

//media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" />

Code CSS : Dans cette section, nous utiliserons quelques propriétés CSS pour redimensionner l'image au survol de la souris. Pour créer l'effet de mise à l'échelle, nous utiliserons les deux propriétés transition et transform.



Code complet : dans cet article, nous combinerons les deux parties ci-dessus et utiliserons du HTML. et CSS pour créer un effet de mise à l'échelle de l'image au survol de la souris. Exemple :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
1
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal