3 Efeitos para Imagens do seu Blog

3 efeitos super legais para ser usado em seu blog!!! Vamos ao Tuto:

 Faça sempre backup do seu template antes de modificá-lo , ou tenha um                               blog de testes, caso algo dê algo errado.

Efeito Lower

Este efeito faz a imagem descer de  cima

Vá em Modelo => HTML =>  ]]></b:skin>

Coloque este código abaixo antes de ]]></b:skin>

/*** efeito lower por htmlstrew ***/
@-webkit-keyframes lower {0% {opacity: 0;-webkit-transform: translateY(-2000px);}60% {opacity: 1;-webkit-transform: translateY(30px);}80% {-webkit-transform: translateY(-10px);}100% {-webkit-transform: translateY(0);}}
.eflow {margin-top:#px; margin-left:#px;-webkit-animation: lower 2.3s;}

Quando usar coloque a tag abaixo:

<img class="eflow" src="URL DA IMAGEM">

Efeito Moderation


 Esse efeito fica muito bom em afiliados, moderadores , enfim onde vc quiser.

Coloque este código abaixo antes de ]]></b:skin>

/***** EFEITO MODERAS ******/
.imagem:hover{opacity:1.0;-webkit-transition-duration: .45s;}
.efeito img{width: 116px; -webkit-transition-duration: .45s;}.efeito:hover img {-webkit-transition-duration: .45s; -webkit-transform: rotate(360deg); opacity: 0.20;}
.efeito img:hover {-webkit-transition-duration: .45s; opacity: 1.0;}

***Voce pode editar a largura se quiser é só alterar o número em destaque

Quando usar coloque a tag abaixo:

<div class="efeito">
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
</div>

Imagem em Preto e Branco

Por ser mais simples , voce pode usar onde quiser

Coloque este código abaixo antes de ]]></b:skin>

.pb {-webkit-transition-duration: .90s;}
.pb:hover {-webkit-transition-duration: .90s;-webkit-filter: grayscale(100%);}

Quando usar coloque a tag abaixo:

<img src="link da imagem" class="pb">

 São efeitos simples, mais que fazem diferença em seu blog. Xeiruuuuuu