Efeito Queen

Boa noite pessoal, desculpe a demora para postar, me distrai vendo anime de novo rsrs Mas trago um rápido tutorial de efeito, ele se chama Queen. O efeito dele e bem simples, a imagem aparece com uma bordinha e ao passar o mouse um fundo branco com opacidade vai  aparece, revelando o texto. Os créditos são do KW. Então chega de blá, blá, blá e vamos lá.

Brevia do efeito

1. Primeiramente vá até seu HTML, então procure por ]]></b:skin>. Acima da tag, cole esse código:

Códigos

.queen a, .queen a img {display: inline-block;}
.queen a {width: LARGURADAIMAGEMpx; height: ALTURADAIMAGEMpx; position: relative; padding: 3px; background: #CORDABORDA; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px 3px 3px 3px;}
.queen a span {position: absolute; width: 110px; height: 110px; top: 3px; left: 3px; text-align: center; font: 8px handy; text-transform: uppercase; line-height: 110px; text-color: #CORDOTEXTO; text-shadow: 0px 1px 1px rgba(255,255,255,0.6); font-size: 8px; opacity: 0; filter: alpha(opacity=0); background: rgba(255,255,255,0.8); transition-duration: 2s; -webkit-transition-duration: 1s; -moz-transition-duration: 2s;}
.queen a:hover span{opacity: 1; filter: alpha(opacity=99);}

2. Arrume as partes em negrito como se pede, e então salve. Agora vá ate seu layout e abra um gadget de HTML/JavaScript, então cole:

Códigos

<div class="queen">
<a href="SEULINK.COM"><img src="URL DA IMAGEM" />
<span>SEU TEXTO</span></a>
<a href="SEULINK.COM"><img src="URL DA IMAGEM" />
<span>SEU TEXTO</span></a>
</div>

Novamente, arrume como se pede nas partes em negrito, e então salve. Para adicionar mais é só repetir do "<a href" até a "</a>".