Reino Kawaii

Olá :3 Neste tutorial vamos ver com adicionar texto em imagens com HTML e CSS, de modo que ao passar o mouse na imagem você consiga ver o que está escrito; como sugestão, trouxe um menu, mas o conteúdo da parte em HTML pode ser qualquer um ok? Será algo como isso:

Menu (passe o mouse na imagem)

Conheçam as redes sociais do Reino Kawaii:


Twitter Facebook Tumblr G+

Vamos lá!
1. Cole este código no HTML do seu template, acima de ]]></b:skin>:

.menuimg {/**se refere ao menu que aparece dentro da imagem**/
background:#FFCCFF;/**cor de fundo**/
border:1px dotted #ffffff;/**borda**/
border-radius:10px;/**arredondado**/
color: #FF9999;/**cor do texto**/
-webkit-transition: 1s;
padding:2px;
}
menuimg:hover {/**se refere ao menu quando o mouse passar nele**/
background:#CCCCFF;
color: #fcc;
text-decoration: underline;
border-bottom: 1px dotted #fcc;
-webkit-transition: 0.5s;
}
#tittlemen{/**texto com titulo MENU**/
font-size: 20px;
color: pink;
font-family: 'Arial';
text-align: center;
text-shadow: 5px 5px 5px 5px #FF99FF;
text-decoration: blink;
}
#imgmenu{ /**parte em que os textos aparecem quando o mouse passar**/
background:#ffffff; 
color:#CCCCFF;
font-size: 11px;
font-weight: bold;
width:220px; 
height:111px;
margin-top:-120px; 
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
border-radius:30px; 
opacity:.1; 
-webkit-transition:all .5s ease-in-out; }
#imgmenu:hover{opacity:.7}
#img-menu {/**personaliza a imagem**/
border-radius:30px;
border: 3px solid #fcc;
opacity:0.4;
-webkit-transition-duration:2.5s;
}
#img-menu:hover{/**imagem em hover**/
border-radius:5px;
opacity:0.8;
-webkit-transition-duration:2.5s;
} 

Visualize, caso tudo esteja normal, salve.
2. Cole este código no local em que desejar que o menu apareça, como em um novo gadget HTML/JavaScript:

<div id="tittlemen">Menu</div><br>
<center><img class"img-menu" src="URL DA IMAGEM 220X165" /><br>
<div id="imgmenu"><br>Escreva algo aqui:<br>
<center><a class="menuimg" href="Link" title="título">Nome do Link</a>
<a class="menuimg" href="Link" title="título">Nome do Link</a>
</center></div> 

As instruções estão nos códigos e como você poderá ver, vão se repetindo com relação a bordas, cores, opacidade e efeitos de transição, os quais se pode alterar ^-^ No segundo código, recomendo usar uma imagem com tamanho 220 de largura por 165 de altura, e basta substituir as áreas com nomes dos links e URLs. Para adicionar mais links, vá repetindo:

<a class="menuimg" href="Link" title="título">Nome do Link</a>

É isso. Espero que gostem e beijus <3