z-index no funciona correctamente

[sergi_multimedia]

Hola, estoy intentando poner unas sombras dentro de cada bloque ".artist" pero la sombra me sale encima del bloque.

Al bloque .artist le pongo z-index: 1
A las sombras le pongo z-index: -1
Al contenedor de la página le pongo z-index: -2;

Haciendo esto, no entiendo porqué las sombras se ven encima de la capa ".artist"

:(

Os muestro el código:

Código HTML:

<div id="container-artist">
            <div class="artist">
                <div class="img"><img src="img/artist/yves-carbonne.jpg" alt="yves-carbonne" width="382" height="306"></div>
                <div class="info">Yves Carbonne</div>
                <div class="info"><a href="#">www.website.com</a></div>
            </div>
            <div class="artist">
                <div class="img"><img src="img/artist/vizjan2b.jpg" alt="vizjan2b" width="382" height="306"></div>
                <div class="info">Viz Jan</div>
                <div class="info"><a href="#">www.website.com</a></div>
            </div>
        </div>
 

Código CSS:

.artist {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 5px;
    -webkit-box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, 0.5);
    box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, 0.5);
    margin: 0 0 5% 0;
    position: relative;
    z-index: 1;
}
 
#container-artist {
    width: 100%;
    overflow:hidden;
    background-color: #e4e7e9;
    padding: 5%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0 0 4% 0;
    -webkit-box-shadow:  0px 0px 4px 0px rgba(0, 0, 0, .8);
    box-shadow:  0px 0px 4px 0px rgba(0, 0, 0, .8);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    z-index: -2;
}
 
.artist:before, .artist:after 
{
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
 
.artist:after 
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
 

Os muestro la web dónde tengo alojado el proyecto:

http://sergibeltran.com/jim/artist.html

Aquí os muestro dónde aprendí a hacer las sombras estás solamente con CSS, anteriormente me salió en otra página, pero en esta no sé porqué no me sale.

http://www.red-team-design.com/how-t...ss3-box-shadow

Saludos y gracias de antemano!

[pzin]

Creo que tu problema es debido a que no le pones ningún color de fondo a .artist. Ponle un color de fondo y sólo bastaría con poner un z-index negativo a :before y :after en .artist.