Tutorial: Gadget de autoras com efeito legenda

Boa tarde meu ursinhos pimpão u.ú

Então, já que é para eu ter muitas visitas irá ser 2 ou 3 posts por dia

Eh, para a tristeza dos meus docinhos, eu vou ficar aqui enjoando vocês!

Então, hoje eu vim trazer um tutorial meneirinho, é gadget de autoras com efeito legenda.

Clique em Let's Go por favor...

Créditos ao Birthday Cake:

Créditos ao Birthday Cake: ♪

Vá no seu html ~> Tecle Ctrl + F ou F3

E procure por:

]]></b:skin>

 Depois que acha-lo cole em cima dele:

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: #000000;
background-color: #000000;
color: #FFFFFF;
padding: 3px 3px;
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.9;
}
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: #ff55a9;
background: #ff55a9;
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: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

 Edite o código como preferir. Depois crie um Gadget HTML Java/Script e nele cole:

<figure class="cap-left">
<img src="LINK DAIMAGEM" alt="" />
<figcaption>TEXTO</figcaption>

Beijins, e até mais