Ajouter un Effet de Zoom au Survol dans le Module Image de Divi

L’ajout d’effets visuels interactifs sur votre site peut améliorer l’engagement des visiteurs et offrir une expérience de navigation plus dynamique. Parmi ces effets, l’effet de zoom au survol d’une image est une excellente façon d’attirer l’attention sur vos visuels.

Dans cet article, nous allons vous montrer comment ajouter un effet de zoom au survol sur le module Image de Divi.

1. Ouvrir les Paramètres du Module Image

1. Accédez à votre page avec Divi Builder.
2. Ajoutez ou modifiez un Module Image.
3. Cliquez sur l’icône en forme de roue dentée ⚙️ pour ouvrir les paramètres du module.

2. Ajouter du CSS Personnalisé

1. Allez dans l’onglet “Avancé”.
2. Accédez à la section “CSS Personnalisé” → “CSS libre”.
3. Ajoutez le code suivant :

selector.et_pb_image:hover img,
selector .et_pb_image_wrap:hover img,
selector a:hover img {
  transform: scale(1.3);
  transition: all 2s 0s ease;
}

selector,
selector a {
  overflow: hidden;
}

selector.et_pb_image img,
selector .et_pb_image_wrap img,
selector a img {
  transition: all 1s 0s ease;
}

3. Explication du Code

✔ Effet de zoom : L’image s’agrandit à 130% lorsqu’on la survole. ✔ Animation fluide : L’animation dure 2 secondes pour un effet plus fluide. ✔ Ajustement de l’overflow : On empêche l’image agrandie de dépasser son conteneur. ✔ Transition en douceur : Une transition progressive est appliquée pour un rendu plus élégant.

4. Personnalisation Avancée

Vous pouvez ajuster les valeurs selon vos préférences :

• Modifier la taille du zoom : Changez scale(1.3) en scale(1.2) pour un effet plus subtil.
• Accélérer ou ralentir l’effet : Ajustez la valeur de transition pour modifier la vitesse d’animation.
• Appliquer l’effet uniquement sur certaines images : Ajoutez une classe CSS spécifique et modifiez le sélecteur.

Conclusion

Grâce à ce tutoriel, vous pouvez facilement ajouter un effet de zoom au survol des images dans Divi. Ce petit détail peut faire une grande différence en rendant votre site plus interactif et engageant. 🚀

Essayez-le et partagez vos impressions en commentaire ! 😉