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

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!