23 fevereiro 2013

Coluna da Gaby: Descrição Hover

Tumblr_md2k8atyth1r2b12jo1_500_large
Awwwwwwwwwnt! [www]
Oi meninas, tudo bem? :)
Hoje resolvi ensinar a colocar um efeito de descrição hover (ao passar o mouse) . O Preview: clique! Créditos TOTAIS ao blog CSS and HTML .
Vamos lá?

Coloque esse código no seu CSS, pra quem não sabe, antes de </style>:
#photo{background:url(http://static.tumblr.com/frmjfs3/0Qkm7jcyc/shay.png);width:291;height:400px; border: solid 5px #c50f39;}.desc{width: 281px; height: 15px; display: inline-block; background: #000; opacity: 0.6; color: #999; -webkit-transition-duration: .90s; margin-top: -0px; overflow: hidden; position: absolut;padding:5px; text-align: justify; }.desc:hover{height: 390px; margin-top: -0px;}
 Mude oque está em negrito de acordo como deseja. Agora coloque o código a seguir no lugar que deseja, a foto com a descrição:


<div id="photo"> <div class="desc"><center>{Title}</center><br><br> Sua descrição ou outra coisa que queira que apareça aqui. <br><br><br> </div></div>
 Espero que tenha dado certo! :)
Dúvidas, vocês já sabem, né? Estou aqui!
Beijos, G@by.

8 comentários:

  1. Adorei o tutorial :3 bem legal e fácil de fazer! beijos

    ~~Quem precisa de tv para ver Beyoncé // perfil

    ResponderExcluir
    Respostas
    1. Ei Dani! Que bom que gostou =D
      Verdade, é facílimo!
      Beijos e obrigada pelo comentário ♥ !

      Excluir
  2. Olá
    Tutorial super útil, gostei!
    Beijos

    cocacolaecupcake.blogspot.com.br

    ResponderExcluir
  3. ficou lindo o efeito. vou ver se uso! se usar eu aviso;*

    rabiiiscosnopapel.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou ^^
      Use sim :)
      Beijinhos c:

      Excluir