Mettre une image de background au premier plan

**xillibit** · 15/01/2013, 13h14

Bonjour,

J'affiche trois images et au survol de la souris je voudrais afficher à la place une image un peu plus grande. Avec mon code, au survol de la souris j'affiche une image en background mais celle-ci ne veut pas se mettre au premier plan. Le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="div_bulles_accueil" class="clearfix">
<div>
<a href="http://monsite.fr/pepiniere-d-entreprises">
<img id="id_bulle_lacle" class="bulle_lacle" alt="" title="" src="/templates/images/lacle_min.png">
</a>
<a href="http://monsite.fr/images/cowork-in"><img id="id_bulle_creafil" class="bulle_creafil" alt="" title="" src="/templates/images/creafil_min.png">
</a>
<a href="http://monsite.fr/images/porte-d-entree-creafil">
<img id="id_bulle_pepiniere" class="bulle_pepiniere" alt="" title="" src="/templates/images/pepiniere_min.png">
</a>
</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.bulle_lacle {
    float: left;
    margin-top: -30px;
    z-index: 1;
}
 
.bulle_lacle {
  margin-top:-30px;
  float:left;
  z-index:1;  
} 
 
.bulle_creafil {
  margin-top:-10px;
  margin-left:-150px;
  z-index:1;
} 
 
.bulle_pepiniere {
  margin-top:-120px;
  float:right;
  z-index:1;
}
 
.bulle_lacle:hover {
  background:url('../images/lacle.png');
  z-index:2; 
}  
 
.bulle_creafil:hover {
  background:url('../images/creafil.png');
  z-index:2;
}  
 
.bulle_pepiniere:hover {
 background:url('../images/pepiniere.png');
  z-index:2; 
}