-
[HTML & CSS] Faire apparaître du texte au survol d'une image
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.
-
Comments
De rien! :3
Ah mince, j'ai peut être mal expliqué, en fait le nom du code, c'est toi qui le choisi, faut juste que il n'y ai pas d'espace. x)
Oui, tu m'avais dit. C'est toujours pas réglé alors.. :c
Hm, t'as déjà essayé de voir si ça venait de ton ordi? Genre nettoyer vite fait avec un logiciel, peut être que ça vient de là. Sinon, il faut attendre une réponse de Stéphanie. :/
Coucou :3
Merci pour le code, je le cherchais depuis pas mal de temps!
Par contre, es-ce que tu saurais le code pour mettre une srollbar au survol des images?
Merci d'avance!
Coucou!
De rien, ce n'est rien. :3
Pour une scrollbar, tu rentres simplement ce code à la place de TON TEXTE. Et après tu écris.
<div style="width: LARGEURpx; height: HAUTEURpx; overflow-x: auto; overflow-y: auto;">CONTENU</div>
Voilàà, de rien!
Cool, contente que ça serve et que ce soit clair. :3
nan mais en vrai, je sais pas comment les gens le trouvent, je l'ai supprimé de mes activité e_e
Coucou, je voulais savoir s'il te plaît, si il était possible d'avoir un texte (un texte lien qui amène donc à une autre page) mais avec une image au survol ? Enfin si ça existe déjà...
Fabule dans ton code tu a oublié au touuut début le code CSS le point avant NOM MINCHIN CHOSE
Add comment
Merci beaucoup !! Y'a un bémol, le nom du code c'est quoi précisément x) ?