Bonjour, j'ai utilisé un bout de code existant et je l'ai bidouillé pour comprendre la fonction hover (je débute en codage). Alors ça marche plus ou moins, le créateur a multiplié les div donc je m'y perds un peu, mais il y a un truc qui ne marche pas comme il faudrait :

https://codepen.io/Elysyon/pen/gOpYRxm

Le texte (avant et après) est décalé alors qu'il devrait être centré sur l'image, et je ne comprends pas pourquoi. Vous pouvez m'aider à le rectifier pour que ça soit plus joli? Merci d'avance!

P.S : au chargement de la page, on voit brièvement le texte "Réponse!" avant qu'il ne disparaisse, c'est normal?

Slt, bon déjà dans un premier temps ne mets jamais d'accent pour le nomage de tes class, change le "après" par "apres" par exemple.

Ensuite pour center ton texte comme il faut dans ta box il y à plusieurs solutions. je vais t'en donner une ajoute dans la class "texte" ceci.

/* Texte original */
.overlay .texte {
 color: red;
 font-size: 30px;
  margin-top: 50vh;
  transform: translateY(-50%);
  text-align: center;
}

La solution que je t'ai mis est aussi présente dans l'article que je t'es mis.

Apres si tu veux d'autres solution y en à ici -> https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html

Merci de ta réponse et pour ton lien, je viens de tester plusieurs façon de faire et ça m'a aidé à comprendre plusieurs trucs Le résultat est beaucoup plus propre maintenant!