28/06/2016

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:

Códigos
<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:

Códigos
<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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345