Superpositions de div

[ApocKalipsS]

Bonsoir,

J'ai un problème que je n'arrive pas à résoudre.

Voici mon code original :

Code :

1
2
3
4
5
6
7
<div class="global">
     <center>
          <img src="img1" />
          <img src="img2" />
          <img src="img3" />
     </center>
</div>

Ici, tout marche très bien, c'est simple et beau : les 3 images sont en "triangles" : 2 sont sur une ligne et l'autre sur la ligne au dessous, au milieu de la div, comme ça : (le cadre noir = div class "global") http://i.imgur.com/FcrMK.jpg

Cependant, j'ai voulu faire un hover avec un effet de fade.
J'ai suivi ce tutorial : http://bavotasan.com/2009/creating-a...r-fade-effect/

Cependant, il utilise 1 seul image, et moi, j'en ai 3. Ce qui fait que les 3 images sont superposées.

Voilà le code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="global">
     <center>
          <div style="position: relative;">
               <img src="img1" style="position: absolute; z-index:4;"/>
               <img src="img1-hover" style="position: absolute; z-index:3;"/>
          </div>
 
          <div style="position: relative;">
               <img src="img2" style="position: absolute; z-index:4;"/>
               <img src="img2-hover" style="position: absolute; z-index:3;"/>
          </div>
 
          <div style="position: relative;">
               <img src="img3" style="position: absolute; z-index:4;" />
               <img src="img3-hover" style="position: absolute; z-index:3;" />
          </div>
     </center>
</div>

L'effet a l'air de bien marcher mais toutes les images sont superposées les unes sur les autres...
comment résoudre cela, sachant que je souhaite conserver l'alignement des images ("2 images sont sur une ligne et l'autre sur la ligne au dessous, au milieu de la div, comme ça : (le cadre noir = div class "global") http://i.imgur.com/FcrMK.jpg")

Merci.

[NoSmoking]

Bonjour,
il semblerait que ton problème relève plus de ton script javascript/jQuery que d'un problème de CSS.

[nsanabi]

Envoyé par NoSmoking

Bonjour,
il semblerait que ton problème relève plus de ton script javascript/jQuery que d'un problème de CSS.

En effet, tu ne fait aucune distinction entre les div contenants chaque couple d'image. donne des id ou des classe et modifie ton javascript en fonction de ça