Galería de imágenes con Css::Experimento

Hoy quiero presentarles un experimento en el que estuve trabajando; se trata de una pequeña galería de imágenes utilizando únicamente css.

Pueden ver el ejemplo en este enlace: http://casinada.freetzi.com/galeria-css/

La verdad es que no está muy bien trabajada aún, se podría mejorar muchos aspectos, o tal vez trabajar con javascript para mejorar los efectos. Pero por eso lo posteo, para que me den sus opiniones y sugerencias.

El html de la galería es el siguiente:

<table id="galeria">
<tr><td>
<a class="imagen" href="#">Friends<span><img src="img/1.jpg" width="300" height="200"></span></a></td>
<td rowspan=6 style="background-color: #000;height:210px;width:310px;color:#fff;text-align:center">Galería</td>
</tr>
<tr><td>
<a class="imagen" href="#">Sapo<span><img src="img/2.jpg" width="300" height="200"></span></a></td></tr>
<tr><td>
<a class="imagen" href="#">Césped<span><img src="img/3.jpg" width="300" height="200"></span></a></td></tr>
<tr><td>
<a class="imagen" href="#">Cooperación<span><img src="img/4.jpg" width="300" height="200"></span></a></td></tr>
<tr><td>
<a class="imagen" href="#">Rojo<span><img src="img/5.jpg" width="300" height="200"></span></a></td></tr>
</table>


El Css:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

body {background-color: #093;font-family:'Trebuchet Ms'}
.imagen {display: block ;color: black ; text-decoration:none ; width:150px;}
.imagen:link {}
.imagen:visited {}
.imagen:hover {color: #fff ; font-weight:bold ; background-color: #000}
.imagen:active {}

.imagen span{
position: absolute;
left: -1000px;
}

.imagen span img{
border:none;
}

.imagen:hover span{
visibility: visible;
top:7;
left: 159px;
}


Y eso es todo, les vuelvo a dejar el enlace al ejemplo:http://casinada.freetzi.com/galeria-css/

Y les hice un comprimido con los archivos del experimento:http://casinada.freetzi.com/?d=galeria-css.rar

Espero sus comentarios :)