Bonjour à tous,

aujourd'hui je vais vous expliquer comment faire une infobulle transparente. Je trouve que ça donne du style à votre forum, au lieu de faire comme les autres, bon j'avoue, bientôt ce style sera démodé d'ici peu, mais en on s'en fou. Commençons par apprendre à faire une infobulle, je vous donne rendez-vous par ici.

---

Maintenant que vous saviez comment faire une infobulle dans le profil, maintenant plus cas modifier le CSS.

Code:

div.infobulle_avatar em {
display:none;
}

div.infobulle_avatar:hover {
background: none;
z-index: 999;
cursor: hand;
position: relative;
text-decoration:none;
border: 0;
}

div.infobulle_avatar:hover em {
font-style: normal; /*écriture de la police*/
font-size: 10px; /*taille de la police*/
color:#000 !important; /*couleur de la police*/
padding: 3px;
display: block;
position: absolute;
-moz-border-radius: 5px; /* bord arrondis*/
-webkit-border-radius: 5px; /* bord arrondis*/
border-radius: 5px ; /* bord arrondis*/
background-color: #FFF; /*couleur de fond de l'infobulle*/
border: 1px solid #000; /*taille et couleur de la bordure de l'infobulle*/
width:150px; /*largeur de l'infobulle*/
top: 100px; /*infobulle à 100px du haut*/
left: 100px; /*infobulle à 100px de la gauche*/
}

Veuillez supprimer ceci:

Code:

background-color: #FFF; /*couleur de fond de l'infobulle*/

Et remplacez ce que vous avez supprimé par ceci:

Code:

background-color: rgba(255,255,255,0.2);

C'est simple non? Voici un aperçu du rendu
ici.

Plus tard je chercherai plusieurs couleur, car là c'est une transparence de la couleur grise. Je vous pris de patientez car je n'ai pas encore trouver la solution. Merci d'avoir visionné ce tutoriel.

Testé sous: Mozilla, Chrome.

Merci ^^"

Le tutoriel existe déjà et a été crée par moi-même il y a pas mal de temps