TUTORIAL: EFEITO DESCRIÇÃO HOVER

TUTORIAL: EFEITO DESCRIÇÃO HOVER

Siga ate seu HTML  e use o Ctrl+F pra achar ]]></b:skin>, e acima dele cole:

#demo-5{position:relative;
-webkit-transition-duration: 250ms;}
#demo-5 .details{
opacity: 0;
position:absolute;
top:0;
left:0;
margin-left:-200px; -webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-5:hover .details{
opacity: .8;
margin-left:0;
background: #CORDOFUNDO;
font-size: 12px;
text-align: center;
width: LARGURApx;
height: ALTURApx;
-webkit-transition-duration: 250ms;}

 Altere as partes em negrito como se pede, e salve. Vá ate seu layout e abra um HTML/JavaScript, cole:

<div id="demo-5" class="demobox">
<img src="LINKDAIMAGEM"/>
<div class="details">
<h3>TEXTO MAIOR</h3>
<p>TEXTO MENOR</p></div></div>

http://www.bunnycrazy.net/2012/12/tutorial-efeito-descricao-hover.html#more