Yes You Web!

Publié le 19 décembre 2020

Dans la plupart des thèmes WordPress, il est possible de définir une colonne avec une image d’arrière-plan et d’écrire du texte en html dessus. En revanche, si vous voulez que ce texte change au passage de la souris (hover) et / ou que l’image se change aussi, alors c’est moins évident que votre thème le propose. Nous avons déjà fait des recherches de plugins mais nous ne trouvons jamais ce qu’il nous faut.

La solution ? Un peu de code HTML et de CSS et magie, nous avons le résultat attendu, vous allez voir, ça n’est pas très compliqué.

Ecrire du texte sur une image

Un petit rappel pour ceux qui seraient tentés d’écrire directement le texte dans l’image :

  • Ça n’est pas bon pour votre référencement naturel, Google ne va pas réussir à lire ces textes qui peuvent contenir des mots clés importants.
  • Ça n’est pas optimal pour le responsive design : le texte va vite devenir illisible sur smartphone car il va se redimensionner avec l’image.
  • Ça n’est pas pratique à mettre à jour : si vous voulez changer un mot, il faut éditer l’image dans Photoshop ou autre, la remettre dans WordPress…
  • Et ça vous prive des astuces que nous allons voir ensemble.

Commençons donc par le cas simple : écrire du texte sur une image, sans aucun effet au passage de la souris. Notez que ce code est valable en html pur, certains éléments ne sont pas nécessaires si vous utilisez un constructeur de page.

Alt text
Texte simple sans hover

Code HTML

Copier

Code CSS

Copier

Une petite explication sur le code…

On créé dans un div un bloc conteneur qui a une largeur de 100% et une position relative. C’est lui qui va contenir notre image et le texte. C’est ce conteneur qui peut disparaître au profit d’un élément de votre thème mais comme nous sommes en html pur, gardons-le.

L’image dans ce conteneur est un bloc d’une largeur égale au conteneur, avec une hauteur automatique.

Le texte, quant à lui, se positionne naturellement dans un div, sous l’image. Il nous faut donc un peu plus de CSS pour le positionner sur l’image, c’est pour cela qu’il a une position absolue et une translation.

Changer le texte au survol de l’image

Ceci étant posé, nous allons maintenant changer le texte sur l’image quand on passe la souris.

Une petite explication sur le code…

On a intégré un lien dans le code html pour bien voir le pointeur lors du hover.

Sans CSS, les 2 textes, sans et avec le survol, se superposent puisque . Le but de la CSS est donc de n’en afficher qu’un à la fois. C’est en jouant sur l’opacité que nous allons le faire, en ajoutant une légère transition pour la fluidité.

Code HTML

Copier

Code CSS

Copier

Changer le texte et l’image au survol

Ultime étape de notre exercice : lorsque vous passez la souris sur l’image, l’image ET le texte vont changer. Vous êtes prêts ?
Cela va seulement se passer au niveau du code html. On englobe image et texte dans chacun des div « texte-normal » et « texte-hover ».

Code HTML

Copier

Code CSS

Copier

Conclusion

Voilà, nous espérons que cet article vous a plu, amusez-vous bien !
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !