Image overlay help - it all stacks over one image!

Answer 1

without touching the CSS, you could get jQuery to do everything for you.

$('.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)}
);

Answer 2

The div's are now block elements, and they have no height because they are filled by floats/absolute positioned elements.

Change:

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

To:

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

And you should get something much closer to what you want. It might need some tweaking after this.