Tutorial - Menu hover na imagem


Olá.

Como está sendo o inicio de Domingo de vocês? Eu quero aproveitar bastante esse Domingo já que é meu último dia de férias, não estou triste até por que eu quero conhecer pessoas novas. Hoje eu acordei do tipo "quero postar 1923 vezes hoje" então eu peço que por favor façam pedidos na ask. 

Hoje vim trazer um tutorial de uma coisa que eu acho vocês gostaram, pelo fato de ser muito bonito, o tutorial do menu hover na imagem, que para quem não sabe é esse menu atual. Vejam a preview maior aqui:  


: Vá até seu html do blog e pesquise por: ]]></b:skin> e acima disto cole o seguinte código:
/* --- 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");}
Edite como quiser, visualize se estiver tudo certo salve.

2º: Crie um novo gadget HTML e cole o seguinte código:
<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>
 Agora edite o que está em negrito, lembrando que no lugar de # você colar o link e em link você coloca o nome do link, exemplo: em vez de # bote http://seublog.blogspot.com/p/sobre.html e no lugar de link bota Sobre.

Espero que tenham gostado e os créditos são do Things to Help You.

8 comentários:

  1. Eu usava esse menu no meu layout anterior, acho ele muito legal. Adorei o tutorial, está muito bem explicado ^^

    Beijos!
    http://productions-ofdreams.blogspot.com.br/

    ResponderExcluir
  2. Que lindo o menu ! Ótimo tutu =D

    Beijos

    ResponderExcluir
  3. bem legal o menu! pena que não fica visível!
    beijos da isa
    link: Cute Time//Official

    ResponderExcluir
    Respostas
    1. Pois é mas as pessoas sempre passam o mouse em cima da primeira imagem da sidebar. (:

      Excluir
  4. o menu tá show u.u
    luvsandiely.blogspot.com

    ResponderExcluir