Позиционирование <span>изображения в фотогалерее

Question

Я использую HTML и CSS для создания фотогалереи с наведением курсора, при наведении на изображение большого размера под миниатюрой. Мой HTML выглядит следующим образом:

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

Я установил контейнер шириной 900 пикселей и повторил линию под ним 8 раз. Это помещает 8 миниатюр в строку, начинающуюся в верхнем левом углу контейнера.

Я могу установить положение изображения так, чтобы оно находилось ниже этой линии, используя «top» в коде CSS, но не могу установить положение изображения слева направо. Он всегда начинается справа от соответствующего эскиза.

Кажется, я все перепробовал, но надеюсь, что нет.

Помощь! Пожалуйста.

Answer 1

Этот CSS должен помочь:

.thumbnail {
    position: relative;
}

.thumbnail span {
    display: none;
}

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

    background: #fff;
    padding: 10px;
}

Это должно расположить диапазон на том же расстоянии от левого края, что и большой палец.

Рабочий пример:

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