Efeito nas imagens com mensagem e efeito hover


 Oi gente, tudo bem? Me pediram na ask, já tem um tempo, de como fazer uma imagem de Welcome como a minha, que você passa o mouse nela e aparece a mensagem.

PREV


Vou explicar como fazer esse tutorial: Primeiro vamos criar a caixa da imagem, depois as mensagens, etc...

Criando a caixa da imagem

1. Vá em Modelo >  Editar HTML > Clique na caixa de código e procure por ]]></b:skin>, acima cole:
caixaimg {
background: url("LINK DA IMAGEM") no-repeat;
display:block;
height: ALTURApx;
width: LARGURApx
}
2. Agora, vá em Layout, adicione um Gadget HTML/JavaScript com o código <caixaimg></caixaimg> .
2.1.  Lembrando que, você pode trocar o caixaimg pelo nome que quiser, mas deve ser o mesmo em todos os códigos.

Criando a div da mensagem

3. Volte para Modelo > Editar HTML > Clique na caixa de código e procure por ]]></b:skin> e acima cole:
.mensagem {
padding: 3px;
opacity: 0;
-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;
}
Este é o código da mensagem quando não passamos o mouse, perceba que ela tem "opacity: 0;", ou seja, ela não aparece, mas se você quiser que ela apareça um pouco, coloque um número entre 0.1 0.4 .

4. Agora vamos fazer com que ela apareça, cole esse código acima de ]]></b:skin> :
caixaimg:hover .mensagem {
background: #FUNDO;
-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;
opacity: 1;
color: #COR;
}
Mude o que se pede, e perceba que neste código tem "opacity: 1;", esse código faz com que a mensagem apareça. Salve e vá para Layout, no mesmo gadget que você botou o <caixaimg></caixaimg>, e entre esses dois códigos, cole:
<div class="mensagem">Aqui você coloca toda a sua mensagem, mas tome cuidado para não ficar muito grande e passar o tamanho da imagem!</div>
4.1 Se você quer fazer com que ela venha para baixo, como no preview, no código .mensagem { , adicione o código margin-top: -300px; , e no código caixaimg:hover .mensagem { adicione margin-top: 0px; ou o número que quiser.

 O tutorial é isso, dúvidas? Comente. Tchau, se usar credite!
Compartilhe no Facebook
Compartilhe no Twitter
Compartilhe no Google+

9 comentários, comente também!

  1. Ótimo tutorial *-*

    princesamaloka.blogspot.com

    ResponderExcluir
  2. Adorei o tutorial :) Irei usar para o meu Lay que estou fazendo o/

    http://lovethespring.blogspot.com.br/

    ResponderExcluir
  3. Vou começar a assistir Higurashi Na Naku koro ni amanhã... Depois que Shiki acabou eu fiquei meio perdida e deprimida, não sabia o que assistir depois... Higurashi é bom?

    Adorei o tutorial, sempre quis saber como colocava ^^

    {euamohtml.blogspot.com}

    ResponderExcluir
    Respostas
    1. Higurashi é bom, porem tem que entender a história e prestar atenção, te recomendo Umineko no Naku Koro Ni, é bem legal e tem mais sangue -q

      Excluir
  4. Que ótimo que vai colocar domínio :3 Enfim, adorei o tutorial, esta mensagem que você fez é fantástica, nunca vi igual :3

    Visite o blog | Etc For Me ♥

    ResponderExcluir
  5. Já tive um domínio, mas tirei :( Adorei o tutorial *-*

    Unskilled

    ResponderExcluir
  6. Realmente, um domínio é muito barato, mas só acho que vale a pena usar em um blog grande mesmo como o WHH ^-^ Omg, sempre quis saber como fazer essa caixinha ♥3♥ obrigada por postar, no meu próximo layout vou usar concerteza *-*

    donut maker || dá uma passadinha lá? ♥

    ResponderExcluir
  7. O tutorial é muito bom mesmo.

    Sarang Cute!

    ResponderExcluir
  8. Um tutorial maravilhoso que estou usando no meu novo lay, lá do blog <3

    Unconditionally Kawaii

    ResponderExcluir

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...

Créditos



O Projeto Aurora foi criado completamente, com tutoriais disponíveis no blog, por mim, Alan Felipe Jantz.

Para as postagens 'reblogadas', os créditos do local de origem dos tutoriais está no final da postagem.

Todos os ícones utilizados neste template foram pegos no flaticon.com, todos os direitos reservados para os autores dos mesmos.





Algo que é seu está aqui, mas não foi creditado?
Entre em contato clicando na aba 'Contato' do menu para receber seus créditos!
BouquetNOVO
The Only ExceptionNOVO
Wide AwakeNOVO
Simple BaseNOVO
NatureNOVO
Why so Pink?NOVO
Why So Blue?NOVO