Positioning <span> image in a photogallery

Question

I am using HTML and CSS to create a 'hover over' photo gallery, the 'hover over' producing a large image below the thumbnail' My HTML looks like the following:

<div id="container">
    <a class="thumbnail" href="#thumb"><img src="thumb1.jpg" /><span><img src="photo1.jpg" /><br />Simply beautiful.</span></a>

I have set the container to be 900px wide and repeated the line below it 8 times. This positions the 8 thumbnails in a line starting in the top left hand corner of the container.

I can set the position of the image to come below this line of thumbs using "top" in the CSS code, but cannot set the left-right position of the image. It always starts to the right of the appropriate thumbnail.

I seem to have tried everything, but hope I haven't.

Help! Please.

Answer 1

Did you tried left-margin ??

Answer 2

This CSS should help:

.thumbnail {
    position: relative;
}

.thumbnail span {
    display: none;
}

.thumbnail:hover span {
    display: block;
    position: absolute;
    top: 30px;
    left: 0;

    background: #fff;
    padding: 10px;
}

This should position the span to same distance from the left edge as the thumb.

A working example:

http://www.ulmanen.fi/stuff/hoverthumb/