Un effet de survol et de rotation sur les images peut rendre votre contenu plus attrayant et interactif. Dans ce didacticiel, nous vous expliquerons comment créer un effet de survol et de rotation simple mais accrocheur en utilisant uniquement HTML et CSS.

Comment créer l'effet

HTML :

Tout d'abord, ajoutez le code HTML suivant :

Vous pouvez ajouter n'importe quelle image de votre choix.

Ce code configure une image enveloppée dans une balise avec une classe de survol-rotation.

CSS :

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}
.hover-rotate img {
  transition: all 0.3s;
  max-width: 100%;
}
.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

Comment ça marche :

La balise

La classe .hover-rotate définit les dimensions de l'image et masque tout débordement. La classe .hover-rotate img gère l'effet de transition en douceur.

Lorsque vous survolez l'image, elle est agrandie de 1,3 fois et pivote de 5 degrés, grâce à la propriété de transformation.

Si vous avez trouvé ce tutoriel utile, n'hésitez pas à le partager avec d'autres ou à laisser un commentaire ci-dessous. Pour plus de trucs et astuces sur la conception de sites Web, n'oubliez pas de consulter nos autres articles.

Visitez mon site Web pour plus de tutoriels comme celui-ci