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:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram