Tutorial - Imagem com efeito hover

Olá designers hoje vou ensinar a fazer um efeito hover em uma imagem...
é bem fácil, porém demorado.
Então vamos lá:

Primeiramente crie sua imagem de como ela fica e como ficara depois que nos passarmos o mouse.
nesse estilo:

Assim Ficará como normalmente!!

Assim quando o mouse estiver em cima

Código HTML:

Esse código a seguir você coloca em Layout//Adicionar Gadjet Html/Javascript.

<a href="LINK_DO_ITEM"><img src="http://i49.tinypic.com/e5h5dt.jpg" height="ALTURA DO ITEMpx" width="LARGURA DO ITEMpx" class="NOME DO ITEM"></a>

Você vai alterar apenas as partes destacadas do código. Em link do item você vai colocar o link que deseja que abra quando clicarem no primeiro nome. Em  altura do item, você irá colocar a  altura das imagens do menu.
No caso do meu  menu a altura é 77 pixels. Em largura do item, você vai colocar a largura da imagem. No meu caso, a imagem que contém o link "Home" tem 147 pixels de largura. E por último, em nome do item, coloque o nome do link, por exemplo "home".

Você vai repetir esse código para cada link do menu, então faça isso com bastante atenção. Quando terminar, salve o gadget. Ainda não vai aparecer nada no seu blog.

Código CSS:

Agora é a segunda parte do código. Vá no html do seu blog, e cole o código abaixo, antes de ]]></b:skin>

.NOME DO ITEM {
     background: transparent url('IMAGEM') no-repeat bottom center;
     width: LARGURA DO ITEMpx;
     height:  ALTURA DO ITEMpx;
     margin-left: 0px;
     }
.NOME DO ITEM:hover {
     background: transparent url('IMAGEM HOVER') no-repeat  top center;
     width: LARGURA DO ITEMpx;
     height: ALTURA DO ITEMpx ;
     }

Em imagem, você vai colocar o link da imagem que fica normalmente e em Imagem Hover como ela ficara depois que o mouse estiver em cima. No restante dos campos, você deve colocar as mesmas informações que colocou no código anterior, principalmente o "nome do item" que deve ser o mesmo que você colocou no código anterior.  Em margin-left, você ajusta as margens caso as imagens fiquem com espaços de umas para as outras.
Qualquer Dúvida relate no comentário, Irei atender.


~Gcl

Novo Postador

Oi galera quem fala aqui é o novo postador: Gcl
Quero agradecer ao Mouro por ter dado essa grande chance nesse grande blog.
Meus Tutoriais não são em vídeo já que minha internet não consegue fazer upload dele =\

Até Mais Galera

~Gcl