Problem masking images for a slideshow

I’m implementing a slideshow of images. It currently has 3 slides, starting with the first one being displayed while the others are placed just on the right, outside the “stage”. This is the resulting html from PHP + javascript:

[code=html]<div id=”slideshow” style=”position: relative;”>

<div class=”slide” id=”slide-1″ style=”position: absolute; z-index: -3; left: 0pt; top: 0pt;”>
<div>
<img alt=”slide 1″ src=”assets/images/slide1.jpg” style=”position: absolute; z-index: 0;”>
</div>
</div>
<div class=”slide” id=”slide-2″ style=”position: absolute; z-index: -2; left: 980px; top: 0pt;”>
<div>
<img alt=”slide 2″ src=”assets/images/slide2.jpg” style=”position: absolute; z-index: 0;”>
</div>
</div>
<div class=”slide” id=”slide-3″ style=”position: absolute; z-index: -1; left: 980px; top: 0pt;”>
<div>
<img alt=”slide 3″ src=”assets/images/slide3.jpg” style=”position: absolute; z-index: 0;”>
</div>
</div>
</div>[/code]

At this moment, everything is visible, even the two slides on the left, which should be masked. I thought I would get the masking effect by assigning [B]“overflow: hidden”[/B] but I was wrong: this makes everything to hide.

What should I do then?

Also in #CSS _↴