Menu: Passe o Mouse Na Imagem

Oie meus cupcakes de baunilha com brigadeiro e limao.
Bem vindos ao T.O.Y,hoje eu vim trazer aqui,um menu que fique quebrando miha cabeça para decifra-lo e postar aqui como estreia.
Bom ele é um  menu fofo,que você pode usar,a vontade,dando os creditos.
Vamos lá?
é bem facil de fazer esse menu por isso fique atento.
pegue esse codigo abaixo e cole acima do seu CSS

/* --- Imagem ------- */
.imagem{background: url('URL da imagem') top left no-repeat; width: 220px; height: 300px;}

/* --- Menu ------- */
.menu{width: 210px; position: absolute; opacity: 0; -webkit-transition: all 1s ease; -moz-transition: 
all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; margin: 5px;}
.menu a, .menu span{background: #b7a89f; color: #ffffff; text-shadow: 1px 1px 0 #9f8b7d; text-align: center; 
font-family:"04b03", small fonts; font-size:8px; text-transform: uppercase; border-left: 4px double #9f8b7d; 
cursor: pointer; display: inline-block; margin: 1px 1px 0px 0px; padding: 5px 0; 

display: inline-block; width: 47%;}

/* --- Hover do menu ------- */
.imagem:hover .menu{opacity: 1; -webkit-transition: all 1s ease; 

-moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}

/* --- Fonte ------ */
@font-face {font-family: "PF Tempesta Seven Condensed";
src: url

('http://static.tumblr.com/8yo5xxv/b5cm22t2y/pf_tempesta_seven_condensed.ttf'); format("truetype");}

Após Você colocar esse codigo acima do seu CSS está pronto,agora vamos usa-lo?
Para usa-lo é simples,basta colar o codigo abaixo num gadget Javascript.

<div class="imagem"><div class="menu">
<a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a>
<a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a>
</div></div>

é fácil não é?espero que gostem,tem muito mais por vir! beijos