Problème avec un code d'image au passage de la souris

[grenouillefarci]

Yo!
J'ai rajouté des balises pour faire en sorte que lorsqu'on passe la souris sur une image, une bulle avec des informations apparaît. Le problème, c'est que lorsqu'on passe la souris sur l'image, la bulle apparaît, mais est cachée par les autres images. Je crains de peiner à expliquer le problème, donc j'ai pris un screen:


Code CSS:

Code:

.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 7px;
  padding-right : 7px;
  padding-top  : 7px;
  padding-bottom : 7px;
    top: 45px;
    left: 5px;
  /* style du bloc qui apparait */
  border: 1px solid #000;
  background-color: #D39766;
  text-align: center;
    visibility: visible;
}
.lock:hover .lock-hidden {
  display: block;
}

[SoraNoHime]

Personnellement je les vois bien au dessus pour les trois



c'est peut etre du à votre navigateur, je suis sous IE

[grenouillefarci]

Étrange... J'utilise Firefox et le même bug persiste sous Safari...

[Lixyr]

Moi aussi je suis sur Firefox et je dois dire que le problème n'apparait pas pour la simple raison que votre forum est très large et donc, l'info bulle concernée sur le screen ne passe pas sous l'image qui se trouve à droite. Enfin bref,

essayez avec ceci :

Code:

z-index: 999;

à ajouter en dessous de

visibility: visible;

dans la partie

/* style du bloc qui apparait */

[grenouillefarci]

Ça fonctionne à merveille! Merci beaucoup.

[Lixyr]

Je t'en prie. ^^