Bom, aposto que o efeito que você quer é esse:

IMAGEM NORMAL:

IMAGEM COM O MOUSE POR CIMA:

Só quero te dizer que varia a foto pode continuar ai como no exemplo acima, ou pode ficar sem a foto e só com a descrição .. não ache que com links é o mesmo processo, é diferente, tem em outro tuto, mas sim, continue a ver:

primeiramente você terá que ter a foto cole esse código no css :

#ph img {-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;position:fixed;width:100px;height:104px;border:5px solid #000;margin-left:160px;margin-top:200px;}

#ph img:hover {-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;position:fixed;width:100px;height:104px;border:5px solid #000;margin-left:160px;margin-top:200px;opacity:0.8;} 

e se quiser que fique sem a imagem troque o opacity:0.8; por opacity:0; ou se quiser que fique com a imagem só que a imagem mais fraca ainda coloque:0.5;

e agora é a descrição basta colar esse código no css:

#dsc {position:fixed;overflow:hidden;font-family:verdana;font-size:11px;background:#000;color:#fff;padding:2px;height:100px;text-align:justify;width:96px;margin-top:205px;margin-left:50px;}

pra ficar tudo certinho um por baixo do outro tem que ficar margin-top margin-left ou margin-right em sintonia, ou seja, tem de estar todos iguais.

e por fim obviamente para dar o corpo cole isto no seu html, depois de body:

<div id=”ph“>
<img src=”a url da imagem que quiser”>
</div>
<div id=”dsc“>
{description}
</div>

e pronto, agora é só creditar se usar. ou haverão consequências.