Tutorial - Efeito Tree

Se sentindo : Cansada.

Boa Tarde gente boa. O único motivo de eu não postar ontem , foi por que estava tentando fazer um layout , e não consegui , comecei a pirar com um monte de códigos então resolvi usar esse layout como base , e coloquei o crédito , claro. Peço desculpas , mais é tipo , muito complicado. Por que do jeito que eu quero não dá. Então fiz as imagens de I Got A Boy , mais as cores do layout é branco , rosa e azul. Dá pra enxergar perfeitamente , não pe igual a o último , totalmente claro. Eu tentei meu máximo mais acho que ainda não é completamente perfeito. Mais acho que dá pro gasto. Créditos

Menu de hoje

Vá em adicionar um javascript e cole dentro dele :

<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: #fff;
border: 1px solid #fff;
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="http://sarang-cute.blogspot.com.br/" title="Sarang Cute"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrl2_0v3mdtzqOGxH64NJDoO2Q0A2Uc9f2MziSA6ofxmFcnyUS4TYuaT9v_hCtdGZDbKJOLf6o2dT-jdkfV1ZhptisF2ycwkS7kTz_mC5cC5hDddVAxnWVDO1dR6bQeGzDnaJtFTutMA/s1600/page.jpg" /></a>
<a href="http://yuukamori.blogspot.com.br/" title="Yuuka Mori"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrl2_0v3mdtzqOGxH64NJDoO2Q0A2Uc9f2MziSA6ofxmFcnyUS4TYuaT9v_hCtdGZDbKJOLf6o2dT-jdkfV1ZhptisF2ycwkS7kTz_mC5cC5hDddVAxnWVDO1dR6bQeGzDnaJtFTutMA/s1600/page.jpg" /></a>
<a href="http://l-ovelymilkshake.blogspot.com.br/" title="Lovely Milkshake"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrl2_0v3mdtzqOGxH64NJDoO2Q0A2Uc9f2MziSA6ofxmFcnyUS4TYuaT9v_hCtdGZDbKJOLf6o2dT-jdkfV1ZhptisF2ycwkS7kTz_mC5cC5hDddVAxnWVDO1dR6bQeGzDnaJtFTutMA/s1600/page.jpg" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrl2_0v3mdtzqOGxH64NJDoO2Q0A2Uc9f2MziSA6ofxmFcnyUS4TYuaT9v_hCtdGZDbKJOLf6o2dT-jdkfV1ZhptisF2ycwkS7kTz_mC5cC5hDddVAxnWVDO1dR6bQeGzDnaJtFTutMA/s1600/page.jpg" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrl2_0v3mdtzqOGxH64NJDoO2Q0A2Uc9f2MziSA6ofxmFcnyUS4TYuaT9v_hCtdGZDbKJOLf6o2dT-jdkfV1ZhptisF2ycwkS7kTz_mC5cC5hDddVAxnWVDO1dR6bQeGzDnaJtFTutMA/s1600/page.jpg" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrl2_0v3mdtzqOGxH64NJDoO2Q0A2Uc9f2MziSA6ofxmFcnyUS4TYuaT9v_hCtdGZDbKJOLf6o2dT-jdkfV1ZhptisF2ycwkS7kTz_mC5cC5hDddVAxnWVDO1dR6bQeGzDnaJtFTutMA/s1600/page.jpg" /></a>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrl2_0v3mdtzqOGxH64NJDoO2Q0A2Uc9f2MziSA6ofxmFcnyUS4TYuaT9v_hCtdGZDbKJOLf6o2dT-jdkfV1ZhptisF2ycwkS7kTz_mC5cC5hDddVAxnWVDO1dR6bQeGzDnaJtFTutMA/s1600/page.jpg" /></a><a href="http://www.blogger.com/" title="Exemplo"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrl2_0v3mdtzqOGxH64NJDoO2Q0A2Uc9f2MziSA6ofxmFcnyUS4TYuaT9v_hCtdGZDbKJOLf6o2dT-jdkfV1ZhptisF2ycwkS7kTz_mC5cC5hDddVAxnWVDO1dR6bQeGzDnaJtFTutMA/s1600/page.jpg" /></a>
</center>
</div>

Feito? Aperte em salva e veja o resultado.