Menu com Imagem em Transição

Olá pessoal! Hoje irei ensinar como fazer o menu que fiz para o blog Cantar Es Lo Que Soy. Vocês precisam seguir passo a passo para que dê certo, pois ele é um pouco mais complicado de fazer.

1. Crie as imagens de cada link do menu, baseada na imagem abaixo:

2. Copie o código abaixo e cole antes de ]]></b:skin>

/* ------------------ Menu ------------------ */
.position {margin-top: 0px; margin-left:12px;}
 .bordernomedolink1 {display: inline-block; width:150px; height:45px;overflow: hidden;}
.bordernomedolink1 img{padding-top:0px;-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s;}
.bordernomedolink1:hover img{margin-top:-44px;}
.bordernomedolink2 {display: inline-block; width:150px; height:45px;overflow: hidden;}
.bordernomedolink2 img{padding-top:0px;-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s;}
.bordernomedolink2:hover img{margin-top:-44px;}
.bordernomedolink3 {display: inline-block; width:150px; height:45px;overflow: hidden;}
.bordernomedolink3 img{padding-top:0px;-webkit-transition: all 0.2s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s;}
.bordernomedolink3:hover img{margin-top:-44px;}
.bordernomedolink4 {display: inline-block; width:150px; height:45px;overflow: hidden;}
.bordernomedolink4 img{padding-top:0px;-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s;}
.bordernomedolink4:hover img{margin-top:-44px;} 

OBS.: A largura está maior e a altura está menor que a das imagens no código, e elas devem continuar assim. Se depois que você fizer tudo, ficar desregulado, altere a numeração no código. Para alterá-la é só ir em width: 150px e height: 45px, e alterar a numeração até ficar certo. 

OBS2.: Como podem ver, no código, o nome dos links está assim ".bordernomedolink1, .bordernomedolink2", mude esses nomedolink, pelo nome de cada link do menu. Se você quiser adicionar mais um, copie é só criar outro abaixo com as mesmas configurações que os anteriores.

3. Após ter feito as imagens e colado o código, copie o código abaixo e cole onde quiser que o menu apareça:

<div class='position'> <div class="bordernomedolink1"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div>
 <div class="bordernomedolink2"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div>
 <div class="bordernomedolink2"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div>
 <div class="bordernomedolink3"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div>
 <div class="bordernomedolink4"> <a href="LINK DO MENU"><img src="IMAGEM DO LINK" /></a></div> </div> </div>

OBS.: Mude os "bordernomedolink" pelos nomes que você colocou no outro código, e coloque o link das imagens e os links do menu.

Prontinho! Já pode usar seu novo menu!

TUTORIAL FEITO POR LETÍCIA PERSI