Positioning problems on image hover?

I've created a gallery so that various images are ordered into columns. The images are links to iframes so when they are clicked, a web page is loaded describing the image. One feature of the gallery that I'd like to integrate is when the user hovers over the image, the name of the image appears. I have this almost working except there is one flaw. The name of the image appears at the bottom right of the containing div, n开发者_Python百科ot the bottom right of the image. How can I fix this? Here is the web page: http://www.givetoagiver.co.cc/gallery.php and here is the style sheet: http://www.givetoagiver.co.cc/style.css Thank you

---

Add:

ul.ulgallery li {
position: relative;
}

---

Its all in the

position: absolute; right: 0; bottom: 0

The a:hover is taking it's absolute position from the first parent which has a position attribute. There is no other element on your page which has position declared so it defaults to the body (whole page)

Try giving the

li { position: relative}

and then changing the absolute position of your

.imgteaser a:hover {top: 0; left: 0}