Hola...hace días que no entraba...revise tu código y faltaban algunas cosas, la capa del texto la tenias con display none y cero visibilidad, ademas te faltaba el HOVER para afectara la capa de texto cuando te paras encima de ella y tenias la capa de texto fuera de la paca principal...hice algo rápido que hace justo lo que tu quieres, ya deberás cambiar dimensiones y cosas así. También tiene una pequeña transición con CSS, es cuestión que lo dejes como quieres.
Código HTML:
Ver original#foto {
position: absolute;
width: 248px;
height: 173px;
z-index: 1;
background-color: #009999;
overflow:hidden;
border:#333 solid 1px
}
#foto img{position:absolute}
#foto:hover #texto{margin:130px 0px 0px 0px;}
#texto {
position:absolute;
width: 248px;
height: 50px;
z-index: 999;
background-color: #33CCFF;
text-align:center;
padding:10px 0px 0px 0px;
margin:180px 0px 0px 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<img src="http://static2.wikia.nocookie.net/__cb20100327032919/beavisandbutthead/images/thumb/c/c3/Beavis_thinks_you_re_sexy_by_KaiteElBean.png/248px-Beavis_thinks_you_re_sexy_by_KaiteElBean.png"> <div id="texto">Explicación de la foto
</div>