Menu em imagem para Autores/ Afiliados com efeito de legenda [002]

Yoooo! Ando meio sem tempo para postar... então decidi fazer algo bem rápido hoje. Minha amiga Lila que monta modelos para tumblr me passou o código para postar aqui, ela não me disse de onde era, mas caçando achei ele no blog KW, então creditos para lá.

1. No seu HTML procure por ]]></b:skin> assim que achar cole esse codigo a cima dele:

Códigos

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; }

2. Agora salve! Vá para o corpo do seu modelo e coloque o codigo a baixo dentro de um gadget de HTML/Javascript. Agora é só editar como desejar:

Códigos

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