Comment changer une image au survol de la souris ?

Publié le 12/01/2022 | 4 commentaires

Vous pouvez facilement jouer avec les options de survol offertes par Divi. On appelle cela le « hover » en webdesign… Par exemple, on peut faire un zoom au survol d’une image comme nous l’avions vu dans un précédent tutoriel. On peut changer la couleur d’un texte ou d’un arrière-plan… Mais aujourd’hui, je vous montre comment changer une image au survol de la souris.

👉 Difficulté : zéro !

👉 Durée : le temps d’un café !

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Qu’est-ce que le « hover » ou « survol de la souris » ?

Est-ce vraiment nécessaire d’expliquer ce qu’est le HOVER ? Si vous êtes webdesigner, vous connaissez et maitrisez… Mais si vous arrivez tout droit de l’âge de glace, voici une petite définition :

Le « Hover » ou « survol de la souris » est le fait d’afficher un état ou un statut différent à un élément lorsque l’internaute passe la souris au-dessus de celui-ci.

C’est très courant pour créer des mises en page originales : changer la couleur, changer la taille, changer la position, etc.

Le saviez-vous ? Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE »

2 – Changer une image au survol en 3 clics

L’avantage est que Divi propose des options de survol dans chaque module et le module Image ne déroge pas à la règle, bien sûr !

Alors, avez-vous déjà pensé à changer carrément une image lorsqu’on passe la souris ? C’est possible et c’est très facile :

  1. Ajoutez un module image au sein de votre mise en page avec le Visual Builder
  2. Importez votre première image, on l’appellera l’image « A »
  3. Activez l’option de survol (hover) en cliquant sur l’icône de la flèche.
  4. Sélectionnez l’onglet Hover (onglet « Flotter », mal traduit) et importez votre seconde image, l’image « B ».
Ajouter un module image
Ajouter un module image au sein de votre mise en page
importer l'image A
Importez d’abord l’image « A »
importer image B
Activez les options de survol et importez l’image « B »

Voilà, c’est tout !

Rien de plus simple, n’est-ce pas ?

N’hésitez pas à vérifier les deux onglets (onglet « Bureau » et onglet « Flotter ») pour vérifier que les deux images sont aux bons endroits.

activer les bons onglets
Vérifiez les images de chaque onglet

3 – Astuces pour un effet réussi

Vous remarquerez que pour que l’effet soit réussi, il est préférable d’utiliser deux images qui se superposent parfaitement.

Pour mon exemple, j’ai dupliqué deux fois la même image et j’ai ensuite changé la couleur et ajouté des éléments graphiques. J’ai réalisé cela à l’aide de deux logiciels :

  • Affinity Photo pour détourer l’image et changer la couleur
  • Affinity Designer pour ajouter les éléments graphiques

Comme je l’explique dans la vidéo qui suit, il m’a fallu plus de temps pour réaliser ces images que pour les intégrer dans Divi.

Cela nous rappelle qu’une bonne mise en page et un bon design de site ne repose pas exclusivement sur la technique pour créer le site… Bien au contraire : vos contenus – vos textes et vos images – feront toute la différence ! Ensuite, Divi vous permettra de les intégrer facilement…

4 – Changer l’image au survol de la souris : le tutoriel en vidéo

Voici le petit récap’ en vidéo… Étant donné que c’est un tutoriel Divi très court, j’en ai profité pour ajouter, en bonus, la conception de ces deux images en fin de vidéo… Donc si vous êtes curieux, regardez la vidéo en entier !

Ne tardez plus ! Découvrez le thème Divi ici !

5 – Les options de survol disponibles dans tous les modules Divi

Pour rappel, les options de survol sont disponibles dans chaque module de Divi ! Il suffit de passer la souris à côté du titre du module pour voir apparaître les icônes de hover et des autres options… Donc n’hésitez pas à vous en servir !

D’ailleurs, c’est également à cet endroit que vous pouvez activer l’icône du téléphone qui vous permet de gérer au pixel près le responsive de chaque module. Je ne le répèterai jamais assez : cherchez bien, toutes les options sont là, sous vos yeux 😉

Envie de customiser Divi comme un(e) pro ? Découvrez tous les tutos !

6 – Pour aller plus loin

Pour aller plus loin avec la fonctionnalité de Hover de Divi, voici une petite liste de tutoriels :

image hover divi ok
image survol divi ok

736 mots

3

Ça devrait vous plaire aussi :

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Avez-vous pensé à personnaliser la page d’erreur 404 de votre site ? Non ? Pourtant, vous le devriez : non seulement c’est simple à faire, mais en plus, cela pourrait faire baisser votre taux de rebond ! L’idée est de conserver sur votre site l’internaute qui passerait par là. Découvrez le tuto pas à pas + la vidéo.

Appliquer des masques et des formes sur vos images avec Divi

Appliquer des masques et des formes sur vos images avec Divi

Les masques rendent vos images plus graphiques et offrent une originalité à votre mise en page. Savez-vous que vous pouvez les créer facilement à l’aide du Divi Visual Builder ? Je vous montre comment faire dans ce tutoriel et dans cette vidéo.

4 Commentaires

  1. Meyer Michel

    Hello Licia, voilà tu as fait un nouveau adepte 😉 en tous cas c’est chouette ton aide que tu apportes et un grand Merci pour tes nombreux tutos.
    Ici sur ce tuto, je pourrais être tenté, sauf ce qui me gène au passage de la souris pour le changement d’image, c’est ce petit « flash » blanc qu’il y à et ça donne un rendu pas du tout fluide entre les deux images. Dommage l’idée est intéressante !
    Cordialement
    Michel

  2. Meyer Michel

    Finalement ça passe bien avec l’essaie que j’ai fait, la transition est fluide 😉

  3. Lycia Diaz

    Oui je vois ce que tu veux dire… tu as certainement raison

  4. Lycia Diaz

    Ah super !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This