Texte derrière une image infobulle transparente

[Mondo Gecko]

Bonjour cher amis,

Alors j'ai besoin de votre aide pour la réalisation d'un certain codage. Je vous explique :

- Dans chaque catégorie de mon forum RPG j'ai mis une image de lieu, mais ce que j'essaye de faire c'est que quand la souris survole l'image, elle devient transparente (ou bien un fond noir) pour laisser place à la description du lieu en texte à la place de l'image.

J'ai tout essayé, une vingtaine de tutoriels, mais je ne trouve pas ce que je veux exactement. Je vous remercie sincèrement de pouvoir m'aider. Malheuresement je ne trouve pas d'exemple sur le net à vous montrer.

Cordialement

(forum php2)

[Mondo Gecko]

Ma demande est toujours d’actualité. En espérant trouver de l'aide.

Merci. ^^

[Mondo Gecko]

Un petit UP.

[Mondo Gecko]

UP

[Mondo Gecko]

Déjà une semaine et personne pour m'aider ? S'il vous plait HELP ME. :thanks:

[Scoubifitz]

bonjour,

le code à mettre dans la description :

Code:

<div class="descript_content">
<div class="descript_text">placez ici la description <br />placez ici la description<br />placez ici la description</div>
<div class="descript_image" id="case_depart"></div>
</div>

le CSS à mettre dans votre feuille de style perso :

Code:

/* cases descriptions */
.descript_content{
  width:600px;
  height:90px;
  position:relative;
  top:0px;
  left:0px;
}
.descript_text{
  padding:5px;
  font-size:12px;
  color:gray;
}
.descript_image{
  width:600px;
  height:90px;
  position:absolute;
  top:0px;
  left:0px;
}
#case_depart{
 background:url(http://img11.hostingpics.net/pics/415798icon.png);
}
.descript_image:hover{
  opacity:0.2;
}

pour les autres descriptions , il faut renommer id="case_depart" dans le code
(par exemple : id="case_info")

et rajouter :

Code:

#case_info{
 background:url(http://img11.hostingpics.net/pics/856062icon2.png);
}

... dans le CSS .

[Mondo Gecko]

Merci beaucoup, mais je tien à m'excuser, parce que j'ai complément oublié de mentionner sur le forum dans lequel je travail. Voici l'adresse : http://bluezone.frbb.net

Donc voila j'ai appliqué votre codage, mais il me faudra deux choses :

- Pouvoir centrer l'image et le texte.

- Faire en sorte que l'image soit totalement transparente pour avoir une meilleur lisibilité de lecture.

Merci d'avance pour votre temps consacré face à mon cas et ma maladresse.

[Scoubifitz]

bonjour,

j'ai modifié le CSS :

remplacez tout par :

Code:

/* cases descriptions */
.descript_content{
  width:300px;
  height:90px;
  position:relative;
  margin:auto;
}
.descript_text{
  padding:5px;
  text-align:center;
  font-size:12px;
  color: grey;
}
.descript_image{
  width:300px;
  height:90px;
  position:absolute;
  top:0px;
  left:0px;
}
.descript_image:hover{
  opacity:0;
}
#case_depart{
 background:#171F28 url(http://img15.hostingpics.net/pics/327623accueil.png);
}
#case_info{
 background:#171F28 url(http://img15.hostingpics.net/pics/649361registre.png);
}

les images ont maintenant une couleur de fond qui cachera le texte , et qui disparaitront au survol ...
le tout est centré ...

[Mondo Gecko]

C'est.... C'est EXCELLENT.

Merci beaucoup Scoubifitz, j'apprécie ce que tu as fais pour moi.


Probleme résolue et un "merci" pour cet excelent codeur.