A ver si es esto más o menos lo que te gustaría hacer. Tú pruébalo y luego modifica sobre él.
En primer lugar, tienes en la css mucho código repetido. La puedes hacer mucho más eficiente poniendo esto en lugar de toda la parte de las imágenes:
Cita: a#bt-imagen1 { background-image: url(images/copas-platos.jpg);}
a#bt-imagen1:hover { background-image: url(images/copas-platos-h.jpg);}
a#bt-imagen2 { background-image: url(images/servilletas.jpg);}
a#bt-imagen2:hover { background-image: url(images/servilletas-h.jpg);}
a#bt-imagen3 { background-image: url(images/cocina.jpg);}
a#bt-imagen3:hover { background-image: url(images/cocina-h.jpg);}
a#bt-imagen4 { background-image: url(images/maquinas.jpg);}
a#bt-imagen4:hover { background-image: url(images/maquinas-h.jpg);}
a#bt-imagen5 { background-image: url(images/silla-mesa.jpg);}
a#bt-imagen5:hover { background-image: url(images/sillas-mesa-h.jpg);}
a#bt-imagen6 { background-image: url(images/maquinas.jpg);}
a#bt-imagen6:hover { background-image: url(images/maquinas-h.jpg);}
Ahora añade estas 4 nuevas clases:
Cita: a.cuadro { border-style: solid;
border-color: rgb(246, 210, 174) rgb(193, 194, 196) rgb(193, 194, 196);
border-width: 3px;
float: left;
width: 180px;
margin-right: 8px;
text-align: center;
margin-bottom: 30px;
height: 134px;
background-color: transparent;
text-decoration: none;
}
a.cuadro:hover { border-top: 3px solid rgb(247, 147, 30);
}
a.cuadro span { padding: 4px 2px;
display: block;
background-color: rgb(255, 153, 0);
text-decoration: none;
color: rgb(255, 255, 255);
width: 180px;
margin-left: -2px;
margin-top: 138px;
visibility: hidden;
}
a.cuadro:hover span { visibility: visible;}
Y para que esto funcione, ahora reemplaza los enlaces de las imágenes por esto otro:
Cita: <div class="caja-galeria">
<a id="bt-imagen1" class="cuadro" href="menaje-cristaleria.html"><span>menaje-cristaleria.html</span></a>
<a id="bt-imagen2" class="cuadro" href="un-solo-uso.html"><span>un-solo-uso.html</span></a>
<a id="bt-imagen3" class="cuadro" href="utensilios-cocina.html"><span>utensilios-cocina.html</span></a>
<a id="bt-imagen4" class="cuadro" href="un-solo-uso.html"><span>un-solo-uso.html</span></a>
<a id="bt-imagen5" class="cuadro" href="un-solo-uso.html"><span>un-solo-uso.html</span></a>
<a id="bt-imagen6" class="cuadro" href="un-solo-uso.html"><span>un-solo-uso.html</span></a>
</div>
Cópialo y pégalo todo con cuidado sobre una copia de tu página y tu css. Pruébalo y a ver qué te parece.
Mikel.
P.D.: si te gusta y lo quieres adaptar necesitará unos retoques para IE6, como siempre.