Tutorial- Descrição surpresa


Boa tarde, não pude postar mais cedo por que minha internet estava péssima e nem tive tempo ainda de postar no meu blog é triste ter uma internet assim. Hoje eu trago um tutorial bem legal que eu aprendi no Kawaii World, acho que vocês também vão gostar, é muito cute. Visualize aqui

1. Procure por ]]></b:skin> e acima cole:
.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 */}
2. Agora crie um gadget HTML/Javascrip e cole:
<div class="imagepluscontainer" style="width:LARGURADAFOTOpx; height:ALTURA DA FOTOpx; z-index:2"><img src="URLDAFOTO" /><div class="desc">ESCREVA ALGO AQUI, É ISSO AQUI QUE VAI APARECER QUANDO VOCÊ PASSAR O MOUSE NA IMAGEM.</div></div>

E aí gostaram do tuto? Qualquer dúvida é só comentar!

7 comentários:

  1. Também achei bem legal esse efeito.
    Kisses!
    http://productions-of-dreams.blogspot.com/

    ResponderExcluir
  2. Olá! Eu acho esse efeito L-I-N-D-O *----* Super fofinho e diferente, muito legal =D E não é difícil de fazer ^.^

    Beijos, Mrs. Nightshade.

    ResponderExcluir
  3. Adorei o tutorial, o efeito é lindo.

    Garota Differente

    ResponderExcluir
  4. Fica muito lindo, só acho que as pessoas não passaram o mouse por cima se não estiver escrito CLICK,rs! Mas acho muito lindo, muito fofo seu layout do blog de testes, e esse aqui é perfeitoooo! Seguindo já Carol, adorei o seu modo de explicar tutoriais! Kiss!

    american---girl.blogs * pot.com.br
    <<tire a estrelinha e visite!

    ResponderExcluir
  5. Esse efeito é realmente lindo, cara, só que tem que colocar mais no último gadget, senão ele estraga o resto, UAHSUAHS' Beijoos, ameeeei seu blog, lindo demais <33 :*

    whatever-it-takes-s2.blogspot.com.br // Visita, please?

    ResponderExcluir