Esse é o efeito que tem no layout Free que disponibilizei da Mirajane. Ele tem esse nome pois fiz especialmente para o layout dela. O segundo efeito só modifiquei o do Kawaii World então créditos para lá. Você pode ver o exemplo AQUI
Vá em editar HTML e procure por ]]></b:skin> e acima cole:
EFEITO 1
.Mirajaneft {
padding: 1px;
border: 1px solid #DCDCDC;
cursor: pointer;
margin-left: 5px;
}
.Mirajaneft:hover {
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
}
EFEITO 2
Vá até editar HTML e procure por <head>. Abaixo da tag, cole o seguinte:
Agora procure por procure por ]]></b:skin> e acima cole:
<link href='http://static.tumblr.com/0xqvkot/MdKmj9am9/flippingkw.css' media='screen' rel='stylesheet'/>
Agora procure por procure por ]]></b:skin> e acima cole:
.Mirajaneft2 {
padding: 1px;
border: 1px solid #DCDCDC;
cursor: pointer;
margin-left: 5px;
}
.Mirajaneft2:hover {
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
-moz-opacity: 0.65; filter: alpha(opacity=65);
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipping;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipping;
-o-backface-visibility: visible !important;
-o-animation-name: flippink;
backface-visibility: visible !important;
animation-name: flipping;
-webkit-animation-duration: 1s;
}
Faça os ajustes necessário, visualize e se estiver tudo certo salve
Em gadget de HTML/JavaScript, cole:
Do efeito 1
<a href="LINK" title="NOME">
<img src="LINK IMAGEM 1" onmouseover="this.src='LINK IMAGEM 2'" onmouseout="this.src='LINK IMAGEM 1'"class="Mirajaneft" /></a>
Do efeito 2
<a href="LINK" title="NOME">
<img src="LINK IMAGEM 1" onmouseover="this.src='LINK IMAGEM 2'" onmouseout="this.src='LINK IMAGEM 1'"class="Mirajaneft2" /></a>
Obs: A imagem 1 deve ser diferente da imagem 2 para que ocorra o efeito de mudar as imagens.
Adorei o efeito!
ResponderExcluirObrigada ^^
Excluir