Ya lo pude solucionar. Simplemente le puse el img despues del a, así
Código HTML:
#metrogdl{width:210px; height:210px; float:left; margin:20px; }
#metrogdl a img{width:210px; height:210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
#metrogdl a:hover img{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid; }
#rescatemos{width:210px; height:210px; float:left; margin:20px;}
#rescatemos a img{width:210px; height:210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
#rescatemos a:hover img{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid;}
#ciudadarbol{width:210px; height:210px; float:left; margin:20px;}
#ciudadarbol a img{width:210px; height:210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
#ciudadarbol a:hover img{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid;}
img{border:none;}