clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

28/06/2016

Tutorial: Efeito opacidade (em hover)


Ohayooo bunnie's! Venho trazer mais um efeito de opacidade para o blog. Esse estilo de opacidade é bem antigo e bastante usado nos blogs, seu efeito deixa as imagens normais, e ao passar o mouse ficam com opacidade, porém ao tirar o mouse de cima a imagem continua opaca. O legal desse modo é que não tem necessidade de colocar algum código dentro do HTML, você simplesmente o aplica nos gadgets.

1) Para aplicar em seu blog, váem Layout abra um novo gadget javascript e dentro dele cole:
<a href="LINK DO BLOG" target="_blank" text-decoration:none; title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="LINK DA IMAGEM" /></a>

2) Ainda tem uma segunda forma de fazer imagens hover. Basta copiar e colar dentro do gadget:
<a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>

Salve e prontinho!

Nenhum comentário:

Antes de sair, não esqueça de comentar!