Menu hover com imagens

Bom pra começar, o menu hover, é aquele, que ao passar o mouse, ele mudade estado, ele pode ser feito com links , com efeitos, mas hoje vou ensinar a fazer ele com imagens.
Para isso, temos que adicionar uma div no css, e outra div, com o mesmo nome da primeira, mas com o atributo :hover.



Assim:

Vá no CSS do seu blog( antes de ]]></b:skin> )

#Menu {
background: url(IMAGEM NORMAL);
height: 10px; //altura da imagem normal//
width: 10px; //largura da imagem normal//

transition-duration: 0.5s; //Efeitos de transição para ficar uma animação lenta//
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}

#Menu:hover {

background: url(IMAGEM QUANDO PASSAR O MOUSE);
height: 10px; //altura da imagem hover//
width: 10px; //largura da imagem hover//


transition-duration: 0.5s; //Efeitos de transição para ficar uma animação lenta//
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}

------------------------------------------------------------------
Pronto, já adicionamos o Css , agora temos que botar o Html
Agora va onde você quer por o menu hover, e cole isso

<a href="LINK"><div id='menu'/></a>