25 de setembro de 2013

Tutorial- Efeito Description

Olá pessoal, trago mais um efeito fofo, ele é para autores e dá um toque
a mais no blog. Os créditos vão para E.A.H

Para colocar em seu blog, copie o código abaixo e coloque antes de ]]></b:skin>

#descripti0n{
width: 150px; -- Largura do hover rosa. Deve ser do mesmo tamanho da imagem
height: 200px; -- Altura do hover rosa. Mesmo tamanhoda imagem
background: pink; -- É a cor do background. Aqui eu usei escrita (pink), mas pode usar códigos como #ff0088, por exemplo
margin-top: -207px; -- É para subir ou descer o hover rosa caso fique desalinhado
margin-right: 1px; -- Mover o hover para a esquerda (números positivos) ou para adireita (números negativos)
color: #F98FAD; -- Cor do texto
text-shadow:0 1px #fff; -- Cor da sombra
font-family: trebuchet ms; -- Nome da fonte
font-size: 9px; -- Tamanho da fonte
text-align:center; -- Alinhamento. Não mexa
opacity:0; -- Não mexa
-webkit-transition: all .5s ease-in-out
}
#descripti0n:hover{
opacity: 0.75;
}

Agora coloque o código abaixo no gadget Html/Java Script:

<center>
<a href="LINK"><img src="URL DA IMG" style="border: 1px solid #ccc; padding: 2px;" /><div id="descripti0n">
DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO DESCRIÇÃO</div>
</a></center>

Kissus

Nenhum comentário:

Postar um comentário

- Este espaço é todo seu. Tire suas dúvidas!

- Por favor, Não faça algum request pelos comentários,
para isso serve a Ask.

- Se não gostou de algo, não use palavras baixas. Ninguém precisa se rebaixar tanto para expressar uma opinião.

- Leio todos os comentários e retribuo todos.

-Thanks