Lo que yo hacía cuando necesitaba hacer eso es usar el contenedor con position:relative y el <a> con position absolute y un ancho y alto del 100%. Algo así:
Código HTML:
Ver original<!DOCTYPE html>
#caja-link{
position:relative;
padding-bottom:20px;
width:200px;
overflow:hidden;
}
#caja-link a{
color:black;
position:absolute;
left:0;
top:0;
width:200px;
height:20px;
text-align:center;
padding-top:200px;
line-height:20px;
}
#caja-link a:hover{
color:yellow;
}
<img src="http://1.bp.blogspot.com/_ytXYaNtqQ4U/ST2QQLZ9EfI/AAAAAAAAAWk/Nr4GAkyXU2o/s200/homer-simpson.png" /> <a href="http://google.com">Google
</a>
Claro que en ese ejemplo hay mas estilos, pero no son dificiles de entender :P
Mirá acá lo podés ver:
http://jsbin.com/acupu5
Otra cosa que podés hacer es simplemente envolver todo el bloque en los <a></a>. Eso no está realmente permitido pues los anchors son elementos inline y no pueden contener elementos de bloque. Aún así funciona. Esto
si está permitido en HTML5.