HTML DIV above DIV inside DIV

Question

i'm trying to build an expandable slideshow for a project of mine, and i got stuck styling my divs in order to appear as i expected to.

I got a div #container wich would hold another two divs: a #shadow div, and a #bgimg div.

<div class="container" id="container">
     <div class="shadow"></div>
     <div class="bgimg"></div>
</div>​

.container {
    width:   81px;
    height:  500px;
    background-color: red;
    overflow: hidden;
}

.bgimg {
    width:   300px;
    height:  100%;
    background: url("http://www.jbraccini.com/files/bg.jpg") no-repeat left top;
}

.shadow {
    width:   100%;
    height:  100%;
    background: url("http://www.jbraccini.com/files/container-shadow.png") no-repeat right top;
    position: relative;
}

• The #bgimg div is meant to hold the actual images the slideshow will be showing.

• The #container div overflow property has been set to hidden, and also a width and height; later, via javascript and i planned to detect mouseover(hover) and mouseout events in order to expand it and show the image in a bigger perspective.

• The #shadow div is planned to be above #bgimg (in the same place but with a higher z-index), and will be having a right-top aligned transparent png(image) as background-image in order to emulate a #container inner shadow, so the slideshow will seem to be (visually speaking) somehow physically embedded on the body of the page.

The final result would be that changing #container width, it would change the #shadow width as well since its width is set to 100% and so, it will positionate the shadow to the right-top while the #bgimg is being uncovered.

I obviously did not achieve such result :D The #shadow div stays above #bgimg, pushing it at its bottom. I tried to set #shadow position: absolute; but i'd love to not to have to change #shadow properties by code, i would like to find a css solution for this, if it's possible.

For understanding purposes i've created some sword of example here: http://jsfiddle.net/jbraccini/jyuKL/8/

And the final result should be something like this: http://www.jbraccini.com/files/final.jpg

Anyway, i hope someone can enlight me.

Best regards!

J

Answer 1

Try this:

.container {
    width:   300px;
    height:  500px;
    background-color: red;
    overflow: hidden;
    position:relative;
}

.bgimg {
    width:   300px;
    height:  100%;
    background: url("http://www.jbraccini.com/files/bg.jpg") no-repeat left top;
}

.shadow {
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: url("http://www.jbraccini.com/files/container-shadow.png") no-repeat right top;
    position: absolute;
    z-index:2;
}

​