Efeito para moderadores ✌

Olá ~

Acho que vocês já devem ter percebido que lá no Gadget "Quem somos", tem dois tipos de efeito..

Me pediram para postar os dois. Um deles eu achei num blog que acabou fechando, então não tenho como repassar o código, já que mudei meu layout hoje cedo. O outro veio do KW, porém eu achei no BC.
Bem, eu espero que gostem, não é nada difícil até porque os códigos são básicos e se explicam por si. Para visualizar, clique aqui, e vá em "Legenda"

Abra seu HTML e procure por ]]></b:skin> logo acima cole esse código: 

figure { display: block; position: relative; float: left; overflow: hidden; margin: 0 10px 10px 0; -moz-transition: all 0.6s ease; } figcaption { position: absolute; margin-bottom: 10px; background: #68228B; background-color: #68228B; color: #FFFFFF; padding: 3px 15px; opacity: 0; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; }figure:hover figcaption { opacity: 0.6; }figure:before { content: "??"; position: absolute; font-weight: 800; background: #B452CD; background: #B452CD; text-shadow: 0 0 5px white; color: #FFF; width: 24px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 24px; -moz-transition: all 0.6s ease; opacity: 0.75; } figure:hover:before { opacity: 0; } .cap-left:before { bottom: 5px; left: 5px; } .cap-left figcaption { bottom: 0; left: -33%; } .cap-left:hover figcaption { left: 0; }

Agora, simplesmente crie um Gadget de HTML e cole

<figure class="cap-left"> <img src="URL DA IMAGEM" alt="" />
<figcaption>NOME DO POSTADOR</figcaption> </figure>