— 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.
Code HTML
Code CSS
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
Code CSS
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
Code CSS
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 !
Bonjour,
Merci pour ce tuto très bien fait.
Mais j’aimerais aller plus loin. Je cherche comment faire durer la transition qu’une seconde.
C’est à dire que l’image originale revienne au bout d’une seconde tout en ayant le curseur dessus. En utilisant que le html et css. (je suis débutant).
Merci pour votre aide !!
Dans ce cas, il s’agit d’une simple animation et non d’un effet au hover.
Regardez ces 2 articles qui peuvent vous aider :
https://yesyouweb.com/creer-transformations-3d-css3/
https://yesyouweb.com/animations-css3/
Bonjour,
je cherche à ce qu’un texte apparaisse uniquement en hover, qu’il n’y ai pas de texte avant (pour être précise, j’ai un article dans ma home page, j’ai mis un hover avec une couleur avec une opacité 0.5 et je voudrait mettre le titre de cet article en blanc avec cette couleur) peut être que vous l’expliquez dans votre article mais malheureusement je suis très très mauvaise en code.. La je ne saurais même pas ou il faut mettre les lignes de codes que vous donnez.. Je bidouille juste dans wordpress avec les boutons déjà prédéfini (j’ai regardé absolument partout 5 heures d’affilé.. pas moyen de trouver alors que mettre la couleur été très facile)
Pouvez vous me donner l’URL de cotre site que je regarde ?