Tutorial | Efeito - Tree

Aloha! Boa tarde humanos! Eu atualizei o blog de testes, onde ficam os previews de alguns tutoriais daqui! E percebi que faz um bom tempo que não posto efeitos para afiliados, etc. Procurei alguns efeitos e encontrei um que eu adoro e já usei, o Tree. Ele é do blog Kawaii World, créditos totais ♥

Blog de Testes aqui ♥

Ah, o preview do tutorial de hoje está no blog de testes c: Se gostou do efeito e quer aplicar no seu blog...

1. Cole o seguinte código em um gadget de html/javascript, edite o que achar preciso.

<style>
#comida a img{
width: auto;
height: auto;
display: inline;
margin-right: 2px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding: 3px;
background: #ffe8ed;
border: 1px solid #ffd1dc;
outline: solid 1px #fff;
outline-offset: -5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#comida a:hover img{
outline: solid 3px transparent;
opacity: 0.5;
outline-offset: -20px;
}
</style>
<div id="comida"> <center>
<a href="seulinkaqui" title="Exemplo"> <img src="linkdasuaimagemaqui.png" /></a>
<a href="seulinkaqui" title="Exemplo"> <img src="linkdasuaimagemaqui.png" /></a>
</center> </div>

• Se você não quiser ocupar todo esse espaço no gadget, cole de <style> até </style> no seu HTML acima do nosso querido ]]></b:skin>.

Espero que gostem desse tutorial, uma dica é usar ele em imagens de welcome e goodbye :3

Beijos, Ráh ♥