Image Map

20.2.13

Efeito Before Tooltip + Imagens para afiliados


Oi gente! Antes queria dizer que vocês podem fazer pedidos de post no meu twitter, @Ingrid__Moura. Também queria dizer pra vocês seguirem meu instagram que acabei de criar, criei ontem. Se vocês tiverem instagram, deixem links nos comentários, que se me seguirem, seguirei de volta. Meu instagram é este, IngridMoura__

Hoje trago um tutorial, de um efeito bem legal, é o que uso aqui no blog nos afiliados. Se chama Before Tooltip. Aprendi esse tutorial no blog Império do PhotoShop, então, todos os créditos a ele. Resolvi fazer esse tutorial pois algumas pessoas elogiram este efeito. Abaixo tem o print do efeito para que os que não viram no gadget, vejam agora :) 




Primeiramente vá até o HTML do seu blog, dê um ctrl F e procure por ]]></b:skin>. Depois de acha-lo cole o seguinte código acima dele:

.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: #XXXXXX; /* 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: #XXXXXX;  /* COR DA SETINHA 1*/
width:62px;
padding: 4px;
font-size: 9px; font-family: arial;
color: #fff;
text-transform:uppercase;
text-align:center;
color: #XXXXXX;  /* 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 #XXXXXX;  /* COR DA SETINHA 2, TEM QUE SER A MESMA COR DA SETINHA 1*/
z-index: 29;
}
.border{
width:66px;
height:66px;
margin-left:1px;
margin-right:1px;
border:1px solid #XXXXXX;  /* COR DA BORDA */
}

No próprio código explica o que é para fazer. Depois abra um HTML/JavaScript e cole o seguinte:

<a href="LINK" class="tooltip"><img src="URL DA IMAGEM" class="border"><span>TÍTULO</span></a>
<a href="LINK" class="tooltip"><img src="URL DA IMAGEM" class="border"><span>TÍTULO</span></a>
<a href="LINK" class="tooltip"><img src="URL DA IMAGEM" class="border"><span>TÍTULO</span></a>
<a href="LINK" class="tooltip"><img src="URL DA IMAGEM" class="border"><span>TÍTULO</span></a> 

Agora vamos para as imagens!
Fiz apenas 5, não ficaram tããããão boas, mas eu usaria. Espero que gostem!

   

Beijos :*

4 comentários: