Faire apparaître un texte au survol d'une image

Bonjour à tous !

Alors je vous propose aujourd’hui un code personnalisable qui vous permet de faire apparaître un texte sur une image au survol de la souris. Vous allez voir, ce n’est pas très difficile, mais soyez quand même attentif et lisez bien tout pour ne pas louper une étape. A noter que je ne vous donne pas le code tout prêt. Ce sera à vous de le constituer !

Alors en premier lieu, il vous faut une image. Pour mon cas, je vais utiliser celle-ci

Spoiler:

Peu importe la taille, nous la définirons dans le code ! Elle peut être plus grande ou plus petite. La première chose que nous allons faire, c’est noter dans un coin sa taille justement. Pour mon image ce sera donc : 500px de largeur et 500px de hauteur.

Nous allons donc créer une div, qui va nous permette de faire l’effet que nous recherchons. A noter que c’est dans cette div que vous mettrez tous les codes. Il vous faut lui donner un nom. Moi je vais l’appeler Cache_Texte. Donc dans mon css je vais avoir

Code:

.Cache_Texte{

}

Nous allons commencer par mettre la taille de notre division, cette division qui contiendra notre texte. Pour ça on utilise le code de la larguer et de la hauteur (dans cet ordre là !)

Code:

.Cache_Texte{
width : LARGEURpx;
height : HAUTEURpx;
}

Ensuite, je vais déterminer si mon texte sera plus haut ou moins haut que mon image, afin de savoir si je dois insérer un code pour faire apparaître une scrollbarr. Ce code sera le suivant, en langage css. Si vous n’êtes pas administrateur sur le forum, faites appel à du css via les balises appropriées (voir plus bas, je vous les donne )

Code:

 overflow: auto;

Maintenant nous allons ajouter le code pour faire une transition, histoire que cela soit plus jolie. On va utiliser pour cela transition-duration. Pour ma part, je vais mettre 0.8 secondes. Si vous voulez que ce soit plus long, augmentez le timing. Si vous voulez que ce soit plus rapide, et bien, vous diminuez tout simplement. Le code est

Code:

 transition-duration:.Zs;

(remplacez Z par la valeur que vous désirez)
Ce code n'étant pas toujours pris en compte par les anciens navigateurs, on va rajouter un préfixe pour qu’il le soit. Je vous renvoie au tutoriel Savoir quand utiliser des préfixes CSS fait par Manumanu.

Enfin, et bien il nous reste qu’à rendre notre texte invisible au premier abord. Pour cela on va utiliser le code opacity.

Code:

 opacity : 0;

0, car on ne veut pas que le texte se voit au début. Et, comme précédemment, on rajoute des préfixes pour être sûr que tous les navigateurs le prennent en charge. Attention, pour internet explorer, il faut utiliser la propriété suivante

Code:

filter : alpha(opacity=0); 

Ensuite, et bien, cela dépend de vous. Si vous voulez qu’il y ait un fond de couleur, vous ajoutez le code nécessaire. Si vous voulez une couleur de texte spécifique, c’est pareil. C’est un code css, il est donc personnalisable :)

Nous avons donc fini la première partie du code. Maintenant, on va coder notre div pour, qu’au passage de la souris, notre div (texte) apparaisse. Nous allons nous servir pour cela du « hover » ce qui signifie en code le survol. On reprend le nom de notre div et on rajoute un deux-points suivi de hover. Donc pour ma part :

Code:

.Cache_Texte :hover{

}

Code:

 .Cache_Texte{

}

.Cache_Texte :hover{

}

Le premier est rempli par les atrtibuts vu plus haut. Et le second, nous allons le remplir avec un seul attribut, donné ci-dessous.

Ce qu’on va ajouter au hover, c’est pour permettre de changer l’opacité. On reprend le code donné plus haut mais à la place de mettre 0, on mets un 1. Si vous voulez que l’image reste un peu en fond, vous pouvez, à la place de mettre 1, mettre 0.8 par exemple. Pour le filter, on est 100 pour 1 et 80 par exemple pour 0.8. Il est calculé en pourcentage.


Et voilà, la partie css est terminée. Maintenant nous allons voir le code html. C’est assez simple. On va d’abord mettre l’image en fond via le code background-image auquel on va attribuer la taille de l’image qu’on a noté plus haut.

Code:

 <div style="background-image:url(URL DE L IMAGE ICI);    width:LARGEURpx; height:HAUTEURpx;">

</div>

Pour ma part, avec mon image, cela donne du coup

Code:

 <div style="background-image:url(http://img15.hostingpics.net/pics/798434AlexPe.png);    width:500px; height:500px;">

</div>

Et maintenant on rajoute la div que nous avons créé en css, que l’on vient incorporer dans celle que nous venons de coder. Pour ma part, cela donne du coup

Code:

 <div style="background-image:url(URL DE L’IMAGE ICI);    width:LARGEURpx; height:HAUTEURpx;"> <div class="NOM DE LA DIV QUE VOUS AVEZ CREE">  texte ici blablabla
</div></div>

Et comme promis, le code pour exporter un css quand nous n’avons pas assez au panneau d’admin c’est

Code:

 <style>

</style>


Et voilà vous savez tout. Et pour ma part, en personnalisant les balises css, cela me donne :

Ezeÿel Sköell

Loup de la meute

Petit-fils de l’ancien ulfric

Autre texte ici blablabla

Par exemple, pour moi cela donne :

Code:

<div class="Cache_Texte" style="background-color:#000000;">  </div>

Et voilà, vous savez tout. A vous de tenter et d'essayer

PS : pensez à changer le nom de la div si vous voulez le faire à la suite, sinon cela court-circuitera mon propre code

Bonjour, il manque un "e" à "d'un" pour faire "d'une"dans le titre.

C'était l'intervention du jour .

Merci pour ce petit tuto ! Je le garde au chaud quand l'occas se présentera :p.

OMG x'D J'avais pas vu merci !

Merci beaucoup

mais jai de la misaire ak le code pouvez vous me donner une example avec mon code svp

Merci pour ton partage Kanala !
Ces temps ci on travaille un peu au ralenti, mais on a bien vu ton tuto et on lira et validera

> kaguya :)

Si tu as des difficultés, tu peux poster dans Problème avec mon code, en mettant le lien du tuto, ton code et un lien d'un endroit où on peut voir le code qui bug :)

Jai réussi merci bcp je l'aime bcp le code *.*

merci :).

Bonjour. Merci pour ce tuto

Merci beaucoup Kanala !
Je classe !