[tutorial] Efeito Descrição Surpresa

12:24

Oi, Oi Meus lindos, tudo bem? Estou triste porque o meu Chihuahua que se chama Simba partiu a pata e agora não se pode mexer, e ele só tem 4 meses , deixa-me de coração partido ver ele com aquele funil, Parece uma Flor ou um E.T.  Mas pronto ele tem de estar com uma tala na pata 3 semanas .-. Fiquei feliz pelos comentários do meu primeiro post, obrigada a todos os que comentaram, sério, pensei que ninguem ia ver o post, Mas vamos ao efeito aqui ta o preview (www). Vamos lá?


Vá no seu blog, depois em Modelo e clique em Editar HTML
clique em ctrl + f e perquise por  ]]></b:skin> 
Agora a cima de ]]></b:skin> copie e cole o código 


.imagepluscontainer{ /* main image container */position: relative;z-index: 1;}.imagepluscontainer img{ /* css for image within container */position: relative;z-index: 2;-moz-transition: all 0.5s ease; /* enable css3 transition on all props */-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.imagepluscontainer:hover img{ /* css for image when mouse hovers over main container */-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-moz-transform: scale(1.05, 1.05);-webkit-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);}.imagepluscontainer div.desc{ /* css for desc div of each image. */position: absolute;width: 90%;z-index: 1; /* set z-index to that less than image's, so it's hidden beneath it */bottom: 0; /* default position of desc div is bottom of container, setting it up to slide down */left: 5px;padding: 8px;background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */color: white;-moz-border-radius: 0 0 8px 8px; /* css3 rounded borders */-webkit-border-radius: 0 0 8px 8px;border-radius: 0 0 8px 8px;opacity: 0; /* set initial opacity to 0 */-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* css3 shadows */-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);-moz-transition: all 0.5s ease 0.5s; /* enable css3 transition on desc div. final 0.5s value is the delay before animation starts */-webkit-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;-ms-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}.imagepluscontainer div.desc a{color: white;}.imagepluscontainer:hover div.desc{ /* css for desc div when mouse hovers over main container */-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* reveal desc div fully */}

Agora va em layout e abra um novo gadget de HTML/JavaScript 
e cole dentro dele:

<div class="imagepluscontainer" style="width:larguradafotopx; height:altura da fotopx; z-index:2"> <img src="urldafoto" /><div class="desc">aqui você coloca o que ira aparecer na descrição quando passar o mouse</div></div>

agora só modifique o que tá em negrito^^
Obrigada e até a próxima, *w*
Kisses,
Sofia

You Might Also Like

8 comentários

  1. Oii o/.
    Cara. que pena, melhoras pra ele o/. Cara, a minha gata já usou uma vez esses funil XD. Adorei o tutorial! Achei ele bem legal!
    Kisses candy ♥

    ResponderExcluir
    Respostas
    1. Oi *w*
      Obrigada, e ele também agradece :3 Eles até ficam engraçados com isso xD
      Obrigada^^
      Beijinhos.

      Excluir
  2. Nossa tadinho gente =/ Mas já levou ele no vet? Leva ele, ou se não tiver dinheiro leva ele em uma agropecuária e pede algum remédio para ele não sentir dor viu? Esse efeito é tão fofo né? Eu postei ele no meu blog a alguns anos atrás, o povo adorava ^^ beijos amore =3

    ResponderExcluir
    Respostas
    1. Não se precisa de preocupar, eu já levei ele no vet e ele já esta a tomar remédios para não sentir dor e tem que estar com uma tala por 3 a 4 semanas para a pata ficar boa 3 Mas Obrigada pela dica <3
      É mesmo muito fofo <3 Eu só não coloco no meu blog, porque o lay não é meu^^
      Beijinhos.

      Excluir
  3. Oi,como vai?
    Melhoras para o Simba viu?:)
    Amei o tutorial,ele é bem bacana<3
    Bom,conheci o blog hoje e ame, poderia visitar e se gostar seguir o meu?Ficaria super feliz ^^
    http://spookywookie.blogspot.com.br/
    Beijos

    ResponderExcluir
    Respostas
    1. Oi, vou bem e você?
      Obrigada <3 E Ele também agradece^^
      Obrigada, eu já conheço o seu blog e já sigo acho ele muito bom^^
      Beijinhos.

      Excluir
  4. Anônimo9/19/2015

    Oiiieeewwww! Que fofo esse efeito *-*
    Ei menina! Seja bem-vinda a blogosfera,que seu blog cresça bastante flor :*
    Parabéns pelo blog
    http://imaginareblogaramigas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hééy! É mesmo *w*
      Obrigada :3 Desejo também muito mais sucesso ao seu :*
      E Obrigada de novo <3

      Excluir

Like us on Facebook