Tutorial - Efeito Surprise para moderadores

Deliciiia! <3

trouxe pra você hoje um efeito bem legal que eu achei no Html Strew, que é um efeito para ser usado com moderadores, ou não, pra mim é ideal como efeito de moderadores, ele tem a imagem e aparece uma descrição hover de cima e tals, bem como eu não sei explicar podem ver a preview aqui. Eai gostaram do efeito ? Então vamos aprender !

1. Cole o seguinte código acime de ]]></b:skin> ajustando só o que está em negrito.

/*** efeito surprise ***/.mod {width:LARGURA-DA-CAIXApx; height:ALTURA-DA-CAIXApx; overflow:hidden; border:5px solid #F9CDAD; -webkit-transition-duration:0.7s; margin-top:3px}.imagem {width:LARGURA-DA-IMGpx; height:ALTURA-DA-IMGpx; -webkit-transition-duration:0.7s; position:absolute; overflow:hidden}.imagem:hover .texto {margin-top:0px; -webkit-transition-duration:0.7s;}.texto {background-color:#FUNDO-DO-TEXTO; color:#COR-DA-FONTE; font-size:10px; text-align:center; width:LARGURA-DO-TEXTOpx; height:ALTURA-DO-TEXTOpx; margin-top:-LARGURA-DA-CAIXApx; padding:5px; -webkit-transition-duration:0.7s; opacity:0.8;} 

2. Para usar coloque o seguinte código em um gadget de HTML/Javascript:

<div class="mod">
<img class="imagem" src="URL-DA-IMAGEM">
<div class="texto"><br>texto aqui baby</div>
</div>