Truque Kawaii: Menu e Texto Ocultos em Imagens

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
Créditos: Nurul






Postar um comentário

4 Comentários

  1. Que lindoooo~~
    Eu vou usar! ótimo truque..hihi~
    Quanto tempo não venho nesse reino eim?!
    Beijos^^
    cotidianodeumabarbie.blogspot.com

    ResponderExcluir
    Respostas
    1. Pois é, faz tempo mesmo ^^ Senti saudades :3
      Beijus e obrigada!!

      Excluir
  2. hmmmmmmmmmmmmm, legal e ficou superfofo no meu blogger! Ahh, e vc ganhou selinhos! ^^
    http://souotomeecomorgullhoo.blogspot.com.br/

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up