Tutorial- Efeito Ballon

Trouxe para vocês mais um efeito, serve tanto para afiliados como para

autores. Acho esse efeito super fofo visualize. Os créditos x

Para colocar esse efeito em seu blog, coloque o código abaixo, acima da tag ]]></b:skin>:

.tooltip {
text-decoration: none;
position: relative;
display: inline-block;
transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s 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.25s ease-in-out;
-webkit-transition: all 0.25s 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 #f16581; /* 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;
}

Para fazer o efeito funcionar coloque o código abaixo

no gadget Html/Java Script

<center> <a href="link" class="tooltip"><img src="imagem" class="kara" /> <span>nome</span></a> <a href="link" class="tooltip"><img src="imagem" class="kara" /> <span>nome</span></a> <a href="link" class="tooltip"><img src="imagem" class="kara" /> <span>nome</span></a> </center>

Kissus