Efeito Hero

Hoje eu trouxe um efeito chamado Hero, ele é um efeito bem irado... eu nunca vi antes. 

Olha a preview aqui >>www<<< Bom, eu acho que ele é pra ser usado mais em gadgets de afiliados, mas dai você decidem aonde querem usar. 

Gostaram do efeito? Clica em leia mais para aprender como fazer.

Para fazer esse tuto,  tem apenas alguns passos.

Vá em Modelo → Editar HTML → Ctrl + F e procure por:

]]></b:skin>

Em cima dessa tag você cola esse código:

@-webkit-keyframes hero {
50% {transform: rotate(16deg) ;
-webkit-transform: rotate(16deg) ;
-moz-transform: rotate(16deg) ;
-o-transform: rotate(16deg) ;
-ms-transform: rotate(16deg) ;}
75% {transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
-ms-transform: rotate(-16deg) ;}
100% { transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
-ms-transform: rotate(0deg) ; }
}
.hero {display: inline-block; border-radius: 5px; margin: -1px; -webkit-transition-duration: .50s; OPACITY: 0.5; outline-style:dotted;
outline-width:1px;
outline-color: transparent;
outline-offset: -5px;}
.hero:hover { -webkit-animation: hero .5s alternate linear; OPACITY: 1; outline-style:dotted;
outline-width:1px;
outline-color: #fff;
outline-offset: -5px;}

Não precisa alterar nada depois é só salvar, agora para que o efeito pegue.
Vá em Layout → Adicionar gadget → HTML/JavaScript
lá você cola esse código:

<a href="LINKDOBLOG"><img class="hero" src="LINKDAIMAGEM" title="TITULODOBLOG" /></a>

 Troque só o que está em negrito, para aparecer mais imagens é só ir repetindo o código.
Pode usar qualquer tipo de imagem, de qualquer tamanho.