[HTML & CSS] Faire apparaître du texte au survol d'une image

26.06.2015

Pour faire apparaître du texte au survol d'une image. C'est pas super compliqué une fois qu'on a compris, même si ça peut paraître rebutant la première fois qu'on voit les codes. Il y a une partie CSS et une partie HTLM.

PARTIE CSS:

.NOM DE TON CODE {
  background-color: #ffffff; /*Couleur de fond*/
  height: XXpx; /*hauteur de ton image*/
  opacity: 0; /*pour qu'on ne le voit pas, tant que ce n'est pas survollé*/
  position: absolute;
  width: XXpx; /*largeur de ton image*/
  transition: all 0.6s ease; /*temps d'apparition au survol*/
}

#image:hover .NOM DE TON CODE {
  height: XXpx; /*hauteur de ton image*/
  opacity: 0.9; /*opicité du fond lorsqu'il apparaît, si y a 0.9 c'est qu'il est un peu transparent*/
  width: XXpx; /*largeur de ton image*/
}

Alors, le NOM DE TON CODE, faut le remplacer par une truc du style "suvolimage" ou "survol1" (sans espace) pour créer une balise il me semble. Ensuite, une fois cette balise créée, on la rappelle pour l'utiliser sur une image survolée.

PARTIE HTML

<div id="image">
<div class="NOM DE TON CODE">
<p><span>TON TEXTE<br /><br /></div>
</div>
<p style="text-align: center;"><img src="URL DE TON IMAGE" alt=" " /></p>

Du coup, y a rien de bien compliqué ici. Comme dit plus haut, le NOM DE TON CODE constitue une balise. Et si tu veux utiliser cette balise, il faut que tu la rappelle en la nommant dans ton code HTLM. Attention, cette balise ne peut être utiliser que pour des images ayant les mêmes dimensions. Si tu veux refaire le même effet mais avec une image ayant d'autres dimensions il faut que tu refasses ce code, mais cette fois-ci en nommant ton code différemment.

(+) au cas où, pour ceux qui se demande comment se nomme le code, en fait, il faut remplacer le NOM DE TON CODE par ce que vous voulez afin que vous puissiez reconnaître le code dans votre CSS.

(Ah et si jamais le texte est plus long que la hauteur de l'image bah tu mets simplement une scrollbar.)

Le code n'est pas de moi, il est de tumblr (fin, il est dispo sur un plein de blog codage sur tumblr quoi). Je me suis juste contentée d'expliquer.

Advertising