Sujets similaires

Bonjour à tous!

J'aimerais avoir de l'aide pour un petit problème sur mon forum. Alors, pour les territoires, lorsqu'on passe la souris de l'ordinateur sur l'image, une bulle apparaît avec une description à l'intérieur. Seulement, parfois la bulle est "complète" et parfois, on voit au travers....

J'aimerais qu'elle soit toujours complète et qu'on ne voit pas au travers puisque ça limite la visibilité du texte.... Pouvez-vous m'aider?

Voici le forum en question:

Spoiler:

Et voici le code en question:

Code:: <div class="infobulle">

<img src="URL DE L'IMAGE" class="opacity" />


<div>
<div class="fleche"></div>
<div class="bouh">
<h1></h1>
<hr /><p>
DESCRIPTION VOULUE
</p>

</div>
</div>
</div>

Et finalement, voici le code CSS

Code:: /*INFOBULLE*/
/*!
* Code proposé par Damudo No Kyoku
* Corrigé par Espeon
* Pour CSSActif - http://www.css-actif.com
*/
.infobulle {
display: inline-block;
}

.infobulle > div {
position: absolute;
margin-top: 0px;
opacity: 0;
visibility: hidden;

-webkit-transform: scale(0.3) rotate(0deg);
-moz-transform: scale(0.3) rotate(0deg);
-o-transform: scale(0.3) rotate(0deg);
transform: scale(0.3) rotate(0deg);

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}

.infobulle:hover > div {
opacity: 100;
visibility: visible;

-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}

.bouh {
width: 367px;
padding: 2px;
margin: auto;
background-color: #000000;
color: #ffffff;
text-align: center;

-webkit-box-shadow: 0 0 5px #212121;
-moz-box-shadow: 0 0 5px #212121;
-o-box-shadow: 0 0 5px #212121;
box-shadow: 0 0 5px #212121;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

.bouh a {
padding: 5px;
margin: 5px 0 0 0;
display: inline-block;
background-color: #000000;
color: #666666;
text-decoration: none;

-webkit-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
-moz-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
-o-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

.bouh a:hover {
color: #ffffff;
}

.bouh h1 {
-webkit-text-shadow: 0 0 5px #ffffff;
-moz-text-shadow: 0 0 5px #ffffff;
-o-text-shadow: 0 0 5px #ffffff;
text-shadow: 0 0 5px #ffffff;
}

.bouh p {
text-align: justify;
}

.bouh hr {
-webkit-box-shadow: 0 0 3px #666666;
-moz-box-shadow: 0 0 3px #666666;
-o-box-shadow: 0 0 3px #666666;
box-shadow: 0 0 3px #666666;
}

Merci pour votre réponse! Smile

Alors, ton problème vient du fait que l'infobulle passe parfois derrière les images transparentes de description.
On va régler ça en CSS avec "z-index" pour forcer à ce que l'infobulle soit toujours au dessus de cette image. Par défaut, tous les éléments ont un z-index de 0, on va donc mettre à tes infobulle une z-index de 1 ^^. (j'explique vite fait et pas très bien, hésite pas à chercher "css z-index" sur Google Razz

Code:: .infobulle > div {
position: absolute;
margin-top: 0px;
opacity: 0;
visibility: hidden;

-webkit-transform: scale(0.3) rotate(0deg);
-moz-transform: scale(0.3) rotate(0deg);
-o-transform: scale(0.3) rotate(0deg);
transform: scale(0.3) rotate(0deg);

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;

z-index: 1; /* faire passer l'infobulle au dessus */
}

Aha! tu expliques peut-être rapidement, mais ça évite de me perdre je ne sais pas trop où dans les bois xD Merci beaucoup pour cette explication! J'ai tout compris d'un coup!!!! <3

Aide opacité

Aide opacité

Sujets similaires

Sujets similaires

Partenaires Or