Pseudo élément & :before

Bonjour,

J'ai soucis en CSS3, j'ai une liste comme ceci :

Code:

---

1 2 3 4 5 6 7 8

<div id="testCSS"> <ul> <li><img src="image.jpg" width="269" height="385"></li> <li><img src="image.jpg" width="269" height="385"></li> <li><img src="image.jpg" width="269" height="385"></li> </ul> </div>

---

Je souhaiterais avoir une ombre "3D", c'est à dire qu'elle s'étend sur une surface, derrière l'image.
J'ai réussi à la faire grâce aux pseudo élément et à :before.

Voici le code CSS :

Code:

---

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 39 40

#testCSS { height: 385px; position: relative; }   #testCSS ul li{ float: left; height: 385px; margin-left: 20px; margin-right: 20px; list-style-type: none; }   #testCSS ul li:before{ z-index: -1; position: absolute; content: ""; bottom: 16px; left: 106px; top: 0%; max-width:250px; width: 100%;   opacity: 0.3; -moz-opacity: 0.3; filter:alpha(opacity=3);   background-image: linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%); background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);   -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); }

---

Le seul soucis c'est que les 3 pseudo-éléments se superpose derrière l'image 1 alors qu'il devrait chacun se trouver derrière leur image (li).

Du coup j'ai le résultat escompter mais que sur la première image. J'aimerais que l'effet s'applique correctement sur les 2 autres images.

Vous trouverez un projet exemple très simple en pièce jointe afin d'améliorer votre compréhension.


Merci d'avance pour votre aide !

Bonsoir,
supprimes left:106px dans le CSS de #testCSS ul li:before.

Merci !
Ça marche niquel !

J'était sûr que c'était juste un petit truc à la con ^^