Pop-up Information above div, hover on img

[outomyelement]

Hello all.

Please see: sustainabledesign (http://www.hessolar.com/share/nf1/nf2/Consulting/)

I'm trying to get this affect:

http://www.hessolar.com/share/nf1/nf2/Consulting/demo.html

when hovering over the 'portable farms,' 'solar electricity,' and 'solar hot water' text and images. I'm trying to get it to position over the huge space above the images (below the top menu) with a background color, transparency and text on "a hover." I've tried every way I know how, but I can't seem to get it to show up properly (or to not move my layout around). I would have left what I was trying, but I think it's just more confusing because i'm cutting and pasting.

I read somewhere else that a "position: absolute" will be required, but at which div? I figure the div which contains the 3 images, and then do a negative distance? Help??

Thanks so much in advance!!!

[outomyelement]

figured it out.


#rcontain a span
{
display: none;
}
#rcontain a:hover span {
display: block;
position: absolute;
top: -278px; left: 2px;
width: 500px;
height:235px;
padding: 10px;
margin: 10px;
z-index: 100;
color: #AAA;
background: grey;
font: 10px Verdana, sans-serif;
text-align: center;
}

I set the rcontain to be relative!