How to force overflow:hidden for layered images within a div?

Question

I am having two IMG s on top of each other within a DIV like so:

<div class="container">
    <img src="somepic.jpg" class="layer" />
    <img src="otherpic.jpg" class="layer" />
</div>

With the following style:

DIV.container {
    width: 400px;
    height: 400px;
    overflow: hidden;
    z-index: 999;
    display: block;
}

IMG.layer {
    position: absolute;
}

Afterwards, I am casting some Dojo effects onto the images to fade one over the other and to scale them up, so that they will become larger than the DIV , which works all fine. But although I set overflow to hidden , I am seeing the entire images overlapping all the time.

So, how can I force the images to hide their overflow?

Answer 1

set the container to

position:relative;

That should make it work :)

Answer 2

Container should have css property position set to relative . If it has this property set, the absolute positioned element inside the container will count position relatively from the container position and so it will not overflow it.

Nice day, JB