13/01/2013

Tutorial: Descrição Surpresa

||

Yo minna-san, como vão vocês? Venho trazer um efeito de descrição para vocês, os créditos são do KW, ok? O efeito é super simples, ao você passar o mouse sobre a imagem, uma descrição vai aparece abaixo dela como uma abinha. Eu achei muito fofo. Então vamos lá?

Para adicionar o efeito, vá ate seu HTML e procure por ]]></b:skin>. Assim que você achar, acima dele adicione esse 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 vá ate seu layout, e abra  um novo gadget de HTML/JavaScript e dentro cole:

<div class="imagepluscontainer" style="width:LARGURADAFOTOpx; height:ALTURA DA FOTOpx; z-index:2"> <img src="URLDAFOTO" />
<div class="desc">QUI VOCÊ COLOCA O QUE IRA APARECER NA DESCRIÇÃO QUANDO PASSAR O MOUSE</div>
</div>

Agora troque onde está em negrito pelo que se pede. E também escreva sua descrição, depois de tudo pronto, salve. Não se esqueça você tem que deixar um espaço para a descrição hover,  porque ela não ira aparecer, e ficara coberta.

10 comentários:

  1. EU ADOREI. SEU BLOG E LINDO DE MAIS.
    OLHA AQUI O MEU http://gb-ronaldo.blogspot.com.br/

    ResponderExcluir
  2. Olá adorei seu blog e uma pena vc não estar postando mais!...(╥ω╥)
    eu to começando a editar meu blog agora... e eu não entendi direito como deixar os espaço tem como vc me explica e só me manda um recado ou responder aki vc que sabe...?!┬┴┬┴┤_o)??!
    beijos e até logo!

    ResponderExcluir
    Respostas
    1. Olá Mary, obrigada por gostar de meu blog. Ainda estou em ativa no blog, só as vezes que tiro uma semana de folga, mas sempre estarei por aqui. Já dei uma olhadinha em seu blog e você já fez o espaço do código para o texto abaixo. ^^

      Excluir
  3. Oii tudo bem e eu de novo nossa eu consegui fazer no meu blog de teste mas no meu blog normal não vai vc sabe me dizer pq isso???

    ResponderExcluir
    Respostas
    1. Esse tipo de coisa acontece quando códigos entram em conflito, experimente por sobre o mobile ^^

      Excluir
  4. Oi voltei deu certo!!!!!!! Uhuuu vlw! muito obrigadooo!

    ResponderExcluir
    Respostas
    1. Que booom!!! Não foi nada Mary ^^

      Excluir
  5. Amei o tuto amore!!
    Blog pft!! Posts pfts, pra resumir: Per-fect!
    Beijinhos!!

    vidadanovata.blogspot.com - Vida da Novata

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram