[SOLUCIONADO] Superponer Div :S

[luciana_uru]

Hola que tal, estoy creando un theme nuevo para mi sitio de peliculas. El problema es que intento que aparesca un recuadro con la descripcion, al realizar hover en la imagen. Pero el recuadro me aparece por debajo, aunque ya le haya puesto z-index. Que podria ser? ya estoy mareada e intente de todo...

Captura:



Code:

Código PHP:

  <div id="movies" class="rounded">
<a href="#"><span class="play"></span></a>
<span class="title">The Amazing Spiderman</span>
<span class="rounded imgc"><a href="#"><img src="/cinemahd/cover/1.jpg" /></a></span>
<div class="descripcion">
Aqui la descripcion de la pelicula...
</div>
</div>  
   

CSS:

Código PHP:

  #movies{background:#434343;float:left;width:17%;height:36%;margin:10px 10px 10px;position:relative;z-index:0;overflow:hidden;}
#movies img{width:100%;z-index:0;}
#movies .play{background:#2a2c3c url('img/play2.png') no-repeat;background-size: 40% 28%;background-position: center; width:100%;height:100%;z-index:2;position:absolute;opacity:0.9;display:none;overflow:hidden;}
#movies .title{width:100%;text-align:center;padding:4px 4px 4px;display:none;position:absolute;}
#movies:hover .play{display:block;cursor:pointer;z-index:2;}
#movies:hover .title{display:block;cursor:pointer;z-index:3;color:#fff;background:#000;bottom:0;opacity:0.8;}

#movies:hover .descripcion{display:block;z-index:999;position:absolute;}
#movies .descripcion{background:#434343;color:#ffffff;display:none;z-index:999;width: 100%;width: 315px;top: 15px;left: 180px;position:absolute;}  
   

[ipraetoriux]

Mmmmmm, mirándolo por muy por encima, me llama la atención acá

Código CSS:

#movies img{width:100%;z-index:0;}
 

En realidad el z-index deberia ir sobre el span que lo conteniene no sobre la imagen, y que ademas no seria z-index 0 porque ya existe en #movies.

Yo lo que haria es agregar un div contenedor de la imagen y el link y darle position absolute

Código HTML:

<div id="movies" class="rounded">
      <div>
           <a href="#"><span class="play"></span></a>
           <span class="title">The Amazing Spiderman</span>
            <span class="rounded imgc"><a href="#"><img src="/cinemahd/cover/1.jpg" /></a></span>
      </div>
      <div class="descripcion">
            Aqui la descripcion de la pelicula...
      </div>
</div>
 

y el css te quedaria algo asi...

Código CSS:

#movies > div {
      z-index: 90;
      position:absolute;
      height; 100%;
      top: 0;
      left; 0
}
#movies > .description{
      z-index: 99;
}
 

Deberías ajustar lógicamente los demás CSS

[luciana_uru]

ok, muchisimas gracias, probare modificando lo que tu me dices :)