<center><style type="text/css">
.img-side{
background: # COLOR FONFO HTML;
color: #000000;
width: 305px;
height: 200px;
margin-top:-215px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-side:hover{
opacity:.6
}
</style>
<img src=" URL DE LA FOTO " width="300" />
<br />
<div class="img-side">
<br />
<center><FONT FACE="arial" SIZE=2 COLOR=#COLOR HTML DEL TEXTO>TEXTO QUE QUIERAS QUE APAREPCA AL PONER EL MOUSE ENCIMA</FONT></center></div></center>
"arial" CAMBIA POR EL TIPO DE LETRA QUE QUIERAS
width: 305px; ESTE ANCHO SIEMPRE TIENE QUE SER UN POCO MAYOR QUE EL DE LA IMAGEN " width="300"
height: 200px; ESTA ALTURA SIEMPRE UN POCO MENOS QUE ESTA margin-top:-210px
opacity:.6 ES SE CAMBIA POR EL TONO DE OPACIDAD ( OSCURO) QUE LE QUIERAS
DAR