Roll over image to display text

I am working on a simple 3 x 3 grid display, what I am trying to accomplish is a series of 9 images, but when hovered/moused over some descriptive text is shown.

This is my code now, and the problem I am having is that the two objects wont lie over each other properly, any ideas?

Thanks!

<style>
.cssnav
{
visibility: visible;
position:relative;
white-space:normal;
display: block;
 
}
 
.cssnav a
{
color: black;
text-decoration: none;
}
 
 
 
.cssnav a:hover img
{
visibility:hidden;
background: #0CC;
}
 
.cssnav span
{
 
visibility:visible;

Syndicate content