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:

HTML Code:
<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>
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 "overflow: hidden" but I was wrong: this makes everything to hide.

What should I do then?