problema para hacer que se muestre texto sobre una imagen con hover

[C2am]

Código HTML:

<div id="recuadro">
<div id="recuadro_trans"><h1>Titulo</h1><h2>texto a mostrarse cuando alguien pasa por arriba con el mouse.</h2>
</div>
</div>
 

Código CSS:

#recuadro{
width:636px;
height:225px;
background:green;
}
 
#recuadro_trans{
background: rgba(0,0,0,0.7);
width:310px;
height:115px;
margin-bottom:30px;
padding:5px;
text-align:left;
}
 
 
#recuadro_trans h1{
color:white;
font-size:18px;
position: relative;
}
 
#recuadro_trans h2{
color:#58ACFA;
font-size:12px;
display:none;    
}
#recuadro_trans:hover h2{display:block;}
 

Por ejemplo:
http://jsfiddle.net/c2am/8cHQN/10/embedded/result/