Menu Oculto com Imagem

Ola queridos amigos(a).Que Deus abençoe cada vez mais a vida de vocês. 

O tutorial de hoje é muito legal, coloquei essa imagem fofinha, (novidade né)?

Mas vocês podem mudar a sua escolha. 
Eu amei o efeito da um tchan muito legal no blog. Veja o exemplo abaixo. Beijinhos coloridos! 

-------------------------------------------------------------------------------------

Copie o código abaixo cole em HTML/Java Script e salve.

<center>
<style type="text/css">
.img-opaco{
background: #E8E6E6;
color: #000;
width: 270px;
height: 210px;
margin-top:-215px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-opaco:hover{
opacity:.7
}
</style>


<img src="http://i111.photobucket.com/albums/n159/docedani/menuopaco/NEW.jpg" width="270" /> 

<div class="img-opaco"> 
<center> <span class="Apple-style-span" style="font-family: verdana, arial; font-size: medium; "><br>

<span id="nav" style="font-size: 13px; font-family: serif; background-color: #FF3E96;padding: 2px;border-radius:5px;border: #000000 1px dashed;-webkit-transition:1s;"> 

<a href="ENDEREÇO DO LINK" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">Home</a></span> 

<span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #FF3E96 1px dashed;-webkit-transition:1s;"> 

<a href="ENDEREÇO DO LINK" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">Parceiros</a></span> 

<span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #FF3E96 1px dashed;-webkit-transition:1s;"> 

<a href="ENDEREÇO DO LINK" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">Créditos</a></span>



<span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #FF3E96 1px dashed;-webkit-transition:1s;">

<a href="ENDEREÇO DO LINK" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">F.A.Q</a></span> 

<font face="Purisa" size=2 color=#000000><b> <br><br> 

Escreva aqui o seu texto</b></font>
</span> </center> </div> </center>

           Onde esta marcado de azul adicione o endereço da sua imagem. 

---------------------------------------------------------------------------------