Attribut title sur image dans un bloc

Bonjour,

Le besoin semble simple mais le résultat attendu n'est pas là : je voudrais afficher une pseudo infobulle d'une image en utilisant l'attribut title or rien ne se passe lorsque le curseur est sur l'image.
Est-ce le bloc qui est à l'origine de mon souci et, si oui, comment alors contourner ce problème (simplement) ?
Voici le code employé :
Code html :
<p id="plein_ecran"><img src="//localhost/jacques-charpentier/wp-content/uploads/2015/08/plein_ecran.gif" alt="plein_ecran" title="texte infobulle"></p>
Code CSS :
#plein_ecran {
background: rgba(0, 0, 0, 0) url("//localhost/jacques-charpentier/wp-content/uploads/2015/08/plein_ecran.gif") no-repeat scroll center top;
display: block;
height: 63px;
position: absolute;
right: 25px;
text-indent: -99999px;
top: 25px;
width: 172px;
z-index: 100;
}
Merci de votre aide

salut,
ton code CSS n'a pas de sens

#plein_ecran{
   display: block;
   position: absolute;
   text-indent: -99999px;
}

que veux-tu faire de cela ?

Si tu veux afficher du texte, tu peux passer par les pseudo éléments ":before" ou ":after".
Un exemple bête et moche.

Salut,
Merci de ta réponse.

En fait, j'ai recopié "bêtement" le code CSS sur une page d'un site qui comportait quelque chose qui ressemblait à ce que je voulais obtenir, c'est à dire :
sur chaque page de mon futur site de photographie, afficher en haut à droite (par dessus le header) une image comportant texte et graphisme (plein_ecran.gif) invitant le visiteur à passer en mode plein écran.

Comme un visiteur a généralement l'habitude de positionner le curseur sur cet élément, je voulais renforcer la fonction de l'image en affichant une pseudo infobulle supplémentaire tout simplement grâce à l'attribut Title de l'image.

L'affichage de l'image se fait correctement (certainement malgré un code CSS un peu incorrect) mais l'affichage de Title ne se fait pas. Peut-être un problème de z-index ?

J'espère que mes explications sont claires. Le problème me semblait simple à résoudre grâce à Title sans passer par un script Js ou autre mais j'ai dû rater quelque chose.

Je comprends bien ta solution avec before (ou after) mais j'aimerais comprendre pourquoi la solution que j'avais adoptée ne fonctionne pas alors qu'elle me paraissait toute bête de simplicité.

jcharp a écrit :
Je comprends bien ta solution avec before (ou after) mais j'aimerais comprendre pourquoi la solution que j'avais adoptée ne fonctionne pas alors qu'elle me paraissait toute bête de simplicité.

Parce que votre code ne cible pas votre image, tout simplement.

Il aurait fallut cibler comme ceci :

#plein_ecran img {
/* le code */
}

La critique du code en lui-même serait un cours à part entière.

Mais bien sûr, c'était évident !
Ah ! quand on a le nez dedans difficile de prendre du recul !

Merci à tous de vos lumières, sujet résolu.