Efeito autores

Foi tirado do blog World of Tutos nao esqueçam de creditar! E como vocês podem ver no blog le funciona mesmo!
O efeito é o efeito de autores 1 nesse blog aqui.

Procure por ]]></b:skin> no seu HTML, depois que achou cole acima o seguinte 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: #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; }

No lugar que tiver cores você podera alterar se quiser.

Agora salve e coloque em uma gadget Javascript esse codigo:

<figure class="cap-left">

<img src="LINK DAIMAGEM" alt="" />

<figcaption>TEXTO</figcaption>

Algumas imagens que podera servir melhor:

Em preto e branco:

Colorido:

Agora do Ian *u* :

v