20/04/2014

Tutorial: Texto hover na imagem

Pediram este tutorial para o Rih-kun um tempo atras e só agora que eu vi, andei lendo uns posts dele porque estou sentido falta, então mil desculpas por não ter postado antes... Que eu me lembre este efeito ele pegou do Tumblr e personalizou para o Blogger. O efeito é esse do primeiro gadget do Layout, mas eu também dei um toque meu para ficar um pouco mais completo ok? Se quiserem ver o preview de como eu fiz, está aqui neste linkO código é mostro, mas é bem fácil, nem precisa editar tanto. Querem fazer? Sabem onde clicar.

Abra o seu Html, aperte Ctrl+F e procure por ]]></b:skin>. Acima do código encontrado coloque: 
.imagem{
width:300px; /*largura da imagem*/
height:300px; /*altura*/
-webkit-transition-duration: .9s; /*duração do efeito*/
}
.imagem:hover{
top:auto; /*modifique apenas se souber o que está fazendo*/
opacity: .8; /*opacidade da imagem quando passa o mouse*/
-webkit-transition-duration: .9s; /*duração do efeito*/
}
.texto{
opacity: .1; /*opacidade do texto*/
width: 280px; /*largura do fundo do texto*/
height: 280px; /*altura*/
margin-top: -300px; /*margem do topo*/
margin-left: 0px; /*margem da esquerda*/
padding: 5px 5px; /*espaço entre o texto e a imagem*/
background: #e3eae7; /*cor do fundo*/
font-family: verdana; /*tipo da fonte*/
text-align: center; /*alinhamento do texto*/
font-size: 11px; /*tamanho da fonte*/
text-shadow: 1px 1px #fff; /*sombra do texto*/
color: #444; /*cor da fonte*/
outline: solid 1px #666; /*bordinha no bloco de texto*/
outline-offset: -2px; /*posição da bordinha*/
-webkit-transition-duration: .9s; /*duração do efeito*/
}
.texto:hover{
opacity: .9; /*opacidade do texto quando passa o mouse*/
-webkit-transition-duration: .9s; /*duração do efeito*/
}
Para usar é só adicionar em um gadget HTML/JavaScript:

<center><div class="imagem"><img src="URL-DA-IMAGEM" /><div class="texto"><br />
SEU TEXTO AQUI
</div></div></center>

Pronto pessoal! Se usarem creditem o blog porque foi o Rih-kun quem fez u.u 

6 comentários:

  1. Adorei o tutorial xD Eu sou completamente inutil em HTML então adoro ver esses tutoriais, pois assim fico a saber alguma coisa xD

    Sobre a afiliação e claro que aceito linda :3 Amei o seu blog e o seu layout :p

    http://aishiteruemcontos.blogspot.pt

    ResponderExcluir
    Respostas
    1. Obrigada, sei como é isso, antes eu era inútil também, mas depois acostuma u.u
      Obrigada por aceitar, eu amo seu blog *----*

      Excluir
  2. Anônimo4/21/2014

    Konnichiwa Hari-Chan! Bom, o resultado fica show, mas este código é "monstro". É, vai só isso, pois não consigo pensar em mais nada...

    Some Things

    PS: Também fico com saudades dele, mas você disse que ele está passando por problemas, né? Então meio que fico feliz, pois assim ele fica melhor logo e fica com menos "carga".

    ResponderExcluir
    Respostas
    1. kkkkkk' O resultado vale a pena
      É, ele está sempre cheio de problemas ultimamente, até que estou feliz u.u

      Excluir
  3. Anônimo4/24/2015

    Finalmente achei esse tutorial, estava procurando a eras. Amei o tutorial, usei no meu blog.

    Kisses, vah [ s l o w l y ]

    ResponderExcluir
    Respostas
    1. Obrigada, que bom que gostou, tutoriais como este que ajudam as pessoas é sempre útil

      Excluir

Vai comentar? Leia as regrinhas:

~ Pode abusar dos palavrões o quanto quiserem, mas ofensas serão excluídas. Caso queiram criticar, críticas construtivas por favor;
~ "Seguindo, segue de volta?" Sim, mas fale um pouco do post também;
~ Pedidos? Fiquem a vontade;
~ Lemos a todos os comentários e sempre os respondemos;
~ No fim do comentário deixe o link de seu blog, se gostarmos, seguimos com prazer .

Pode comentar agora!