Div sovrapposti!

[felino]

Div sovrapposti!

Salve!
Ho il seguente codice:

            <div class="slide">
                <div>
                    <ul>
                        <li><a href="#!/page_home"><img src="images/page1_pic1.jpg" alt></a></li>        
                        <li><a href="#!/page_home"><img src="images/page1_pic2.jpg" alt></a></li>        
                        <li><a href="#!/page_home"><img src="images/page1_pic3.jpg" alt></a></li>
                        <li><a href="#!/page_home"><img src="images/page1_pic4.jpg" alt></a></li>                                    
                        <li><a href="#!/page_home"><img src="images/page1_pic6.jpg" alt></a></li>        
                    </ul>
                </div>
            </div>  

Qui il relativo CSS:

/*NEW SLIDE*/
.slide {
position: absolute;
display:block;
height: 1012px;
width: auto;
z-index: -1;
margin-left: 243px;
overflow: hidden;
}

.slide>div>ul{
position: relative;
height: 1012px;
}
.slide li {
cursor:pointer;
width: 20%;
height:100%;
overflow: hidden;
float: left;
display: inline-block;
}

Praticamente si tratta di 5 colonne!
Vorrei mettere un altro div sopra di esse, con uno sfondo in trasparenza e del testo.

Sapreste indicarmi come realizzarlo?

Grazie.