Efeito Autores Balloon

- Terminei de arrumar o ChocoMapa (www)

Olá gente, tudo de boa na lagoa? Acabei de voltar do super mercado, está friozinho hoje por aqui, mais estou bem ^^'

Hoje tentarei ver o último episódio de Another, podem assistir aqui também (www) é ótimo, não irão se arrepender, eu sempre ouvia as pessoas dizendo que esse anime é ótimo, sempre concordei, pois parecia mesmo ser ótimo, só não o via pois parecia ser muito malígno, mas... anti ontem, fui vê-lo, e hoje, já estou no último episódio, haha' muito bom mesmo, é quase a mesma coisa que o anime hyouka (www) só que com mais terror, e mortes, mais não é macabro, é bem legal, de terror.

Mas, antes de ver o último episódio de Another, irei trazer para vocês um tutorial de como fazer esse efeito que temos nos autores do blog:

-Preview-

Vocês poderão usar nos afiliados também é claro, bem, eu recebi esse pedido, então fui procurar nos favoritos para poder dar os créditos ao blog onde peguei o efeito, então não achei-o, peguei do HTML do A.N mesmo.

Clique na setinha, e cole antes de ]]></b:skin>:

 .tooltip {

text-decoration: none;

position: relative;

display: inline-block;

transition: all 0.10s ease-in-out;

-moz-transition: all 0.10s ease-in-out;

-webkit-transition: all 0.10s ease-in-out;

}

.tooltip:hover {

color: #fff; /* COR DA FONTE*/

}

.tooltip span {

pointer-events: none;

opacity: 0;

-moz-border-radius: 5px;

-webkit-radius:5px;

border-radius:5px;

filter: alpha(opacity=0);

background: #edc2cb;  /* COR DA SETINHA 1*/

width:62px;

padding: 4px;

font-size: 9px; font-family: arial;

color: #fff;

text-transform:uppercase;

text-align:center;

color: #fff;  /* COR DA FONTE*/

left: 50%;

margin-left: -35px;

display: block;

position: absolute;

z-index: 30;

bottom: -10px;

transition: all 0.25s ease-in-out;

-moz-transition: all 0.10s ease-in-out;

-webkit-transition: all 0.10s ease-in-out;

}

.tooltip:hover span {

display: block;

pointer-events: auto;

opacity: 1;

filter: alpha(opacity=100);

bottom: 75px;

}

.tooltip span:before, .tooltip span:after {

content: '';

position: absolute;

bottom: -8px;

left: 50%;

margin-left: -10px;

width: 0;

height: 0;

border-left: 8px solid transparent;

border-right: 8px solid transparent;

border-top: 8px solid #edc2cb;  /* COR DA SETINHA 2, TEM QUE SER A MESMA COR DA SETINHA 1*/

z-index: 29;

}

.kara{

width:70px;

height:70px;

margin-left:1px;

margin-right:1px;

border:1px solid #9acfd9;  /* COR DA BORDA */

-webkit-transition-duration: .60s;

}

.kara:hover{

width:70px;

height:70px;

margin-left:1px;

margin-right:1px;

border:1px solid #edc2cb;  /* COR DA BORDA */

-webkit-transition-duration: .60s;

}

Salve. Cole o código abaixo em um HTML // Javascript:

<a href="URL" class="tooltip"><img src="URL_DA_IMAGEM" class="kara" /><span>NOME</span></a>

Se quiser acrescentar mais autores, copie e cole o código acima quantas vezes precisar ;)