Справка по наложению изображений - все это накладывается на одно изображение!

Question

У меня есть набор из четырех изображений, и моя функциональная цель состоит в том, чтобы при наведении курсора мыши на миниатюру изображения оно накладывало наложение с некоторой информацией, которую можно щелкнуть.

Чтобы дать вамидея, взгляните на это изображение:

image http://i51.tinypic.com/28u5nrt.jpg

У меня есть основы, но в настоящее время оверлеи просто накладываются на верхнее левое изображение.Не знаю, как это исправить, поэтому я подумал, что вы, ребята, могли бы помочь.

Вот сайт: http://lab.albionmedia.biz/clients/silverdale/

Посмотрите на мой код и посмотрите, что вы думаете!

Answer 1

Div теперь являются блочными элементами, и они не имеют высоты, потому что они заполнены поплавками / элементами с абсолютным позиционированием.

Изменение:

#columns .column .image {
   position:relative;
 width:100%;
}

Кому:

#columns .column .image {
  float:left;
  position:relative;
}

И вы должны получить что-то намного ближе к тому, что вы хотите. После этого может потребоваться некоторая настройка.

Answer 2

не касаясь CSS, вы можете заставить jQuery сделать все за вас.

$('.overlay').fadeTo(0,0); //hide the images to start with
$('.image').hover(function(){
        $(this).children('.overlay').fadeTo(200,1)},
    function(){
        $(this).children('.overlay').fadeTo(200,0)}
);