z-index de una imagen

[dhamaso]

Hola, mi problema esta en esta pagina :
http://www.secodein.com/psy-market/prueba_carrusel2.php

lo que necesito es que al pasar el mouse sobre la imagen esta se haga grande, (ya lo pude resolver) , pero ahora las imagenes que estan en los costados se cortan por que estan dentro de un contenedor, queria saber como le hago para que funcione correctamente con las imagenes de los costados, estube leyendo sobre z-index pero no encuentro la forma de hacerlo funcionar.

de antemano gracias, y todas su respuestas son bienvenidas...

[jcampos_sanzana]

puedes hacerlo con position:absolute junto con el z-index,
chequea este link:
[URL="http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp"]http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp[/URL]

[dhamaso]

mmmmm gracias voy a chekar, aun que no se muy bien como aplicar los estilos, me confunde eso de position y z-index...

[jcampos_sanzana]

Iniciado por dhamaso

me confunde eso de position y z-index...

z-index indica el orden de pila (como las capas de photoshop, si es que lo conoces), el numero puede ser negativo como positivo, si es negativo te lo envia al fondo si es positivo lo trae al frente. Pero z-index solo funciona con objetos posicionados (position:absolute, position:relative, or position:fixed).

[URL="http://www.w3schools.com/css/pr_pos_z-index.asp"]http://www.w3schools.com/css/pr_pos_z-index.asp[/URL]

hay muchos ejemplos rondando en la web.

[dhamaso]

cuando se pasa el mouse sobre el elemento img estos son los estilos que aplico.

Código CSS:

img.zoom-hover-image{
    display: block;
    position: absolute;
    z-index: 999;
    top: -30px;
    left: -20px;
    width: 170px;
    height: 190px;
    background-color: #7844F1;
    border: 1px solid #000;
}
 

que estoy haciendo mal?