Voici un aperçu d’un effet de survol, appelé « effet Ken Burns », facilement réalisable grâce aux options de transformation de Divi.
(Passer la souris sur les images)
Pour appliquer cette transformation à une image, suivez ces étapes avec Divi ou téléchargez directement les modèles.
Ajoutez une image dans une colonne
- Insérez une ligne contenant une colonne.
- Ajoutez un module Image et sélectionnez l’image à animer. Veillez à ce que l’image soit plus grande que la colonne afin d’éviter toute perte de qualité ou effet de flou lors de son agrandissement au survol. Une image en haute résolution garantira un rendu net et précis, même après l’application des transformations d’échelle.
Appliquez les transformations
- Ouvrez les paramètres du module Image.
- Allez dans l’onglet Style > Transformer.
- Activez les propriétés suivantes dan l’onglet hover (représenté par une flèche de survol)
Échelle de transformation : Augmentez la taille de l’image (ex. : 140%) au survol.
Transformer : Ajustez les valeurs X et Y pour déplacer l’image.
Rotation : Appliquez une rotation légère sur l’axe X, Y ou Z. Dans cet exemple : 6deg
Échelle de transformation
Transformer
Rotation
Réglez la transition
Dans l’onglet Avancé > Transition, ajustez :
- Durée de la transition : 2000ms
- Courbe de vitesse : sélectionnez linéaire pour une transition naturelle.
Ajoutez du CSS pour éviter le débordement
- Dans Paramètres de la colonne > Avancé > CSS personnalisé, ajoutez :
overflow: hidden;
Transition
Ajouter le CSS dans la colonne
CSS dans élément principal
Une fois ces réglages appliqués, votre effet au survol sera parfaitement fluide et intégré dans Divi.
Si vous souhaitez ajouter l’effet de survol Ken Burns à des images réparties sur plusieurs colonnes, la même procédure s’applique. L’essentiel est d’ajouter l’extrait CSS « overflow:hidden » à chacune des colonnes contenant votre image.
Même effet avec du texte !
Même effet avec du texte !
Même effet avec du texte + image