Le Hover Action permet de définir ce qui se passe visuellement quand le visiteur passe sa souris sur un élément. C’est un détail qui fait toute la différence en termes de qualité perçue : les éléments cliquables doivent réagir au survol.
Configurer un Hover Action
Sélectionne l’élément concerné, puis ouvre l’onglet Hover dans le Properties Panel. Le premier réglage à faire : le Type. Quatre options :
- Canvas Default : applique le Hover par défaut défini sur le canvas.
- Page Default : applique le Hover par défaut défini sur la page.
- None : aucun effet au survol.
- Custom : tu définis un Hover unique pour cet élément précis.
Choisis Custom pour configurer librement l’effet.
Les réglages disponibles
- Opacité : change la transparence de l’élément au survol (0 = invisible, 100 = opaque). Un léger abaissement à 80 suffit pour signaler qu’un élément est cliquable.
- Couleur : change la couleur de l’élément au survol (texte ou forme).
- Time : durée de la transition en secondes. Entre 0.1 et 0.3s pour un effet fluide et professionnel.
Réglages spécifiques aux textes
Les zones de texte ont des options supplémentaires au survol : police, taille, espacement des lettres, soulignement. Pratique pour créer un effet de soulignement progressif sur les liens de navigation, par exemple.
⚠️ Si la taille du texte change au hover et que ça décale le contenu, agrandis la zone de texte et ajuste l’alignement pour laisser de la marge.
Réglages spécifiques aux formes
Sur les formes, tu peux aussi changer la taille et la couleur de la bordure au survol. Utile pour des cartes de services ou des boutons en contour qui se remplissent au hover.
Définir un Hover par défaut pour un canvas ou une page
Plutôt que de configurer un Hover sur chaque élément individuellement, tu peux définir un Hover par défaut au niveau du canvas ou de la page. Clique sur le nom du canvas (ou de la page) dans le Site Panel, ouvre l’onglet Hover dans le Properties Panel, passe sur Custom et configure l’effet. Tous les éléments sans Hover Custom individuel hériteront de ce comportement par défaut.
💡 Le Hover par défaut du canvas est parfait pour les sections avec beaucoup d’éléments cliquables du même type (galeries de photos, grilles de services). Un seul réglage pour tous.
Le Hover sur les images
Sur les images, le Hover peut créer des effets très élégants : changement d’opacité, apparition d’une forme colorée par-dessus, zoom… Ces effets sont particulièrement efficaces dans les galeries portfolio. Showit a une documentation dédiée aux Hover Actions sur images si tu veux aller plus loin.
