Tutorial - Efeito para descrição hover

 

Boa tarde, gente.

Acho que logo depois dessa postagem eu deixo com vocês o debate que eu havia dito antes, espero que participem. Irei voltar a responder e retribuir os comentários do blog, mas sempre vai ter uma vez ou outra em que não vai dar, então espero que não se incomodem tanto. Sabem que tento ao máximo interagir com todos vocês. Sobre o FYB, pelo que eu soube ele foi desativado, por causa de problemas que acho que não devo divulgar.

Enfim, trouxe mais um tutorial de efeito para vocês. Dessa vez é um bem mais simples de descrição que aparece ao passar o mouse na imagem. Encontrei ele no Mel-html e não foi tão difícil passar para o blogger. Não preciso pedir para me creditar, não é mesmo? Todo mundo sabe o que faz. Aliás, quero que vejam isto: http://www.blogmeninamulher.com/ Encontraram algo familiar? Peço que não ofendam a dona do blog, pois como diz na postagem ele foi feito pelo Leandro, do Prince Teen. Que vergonha, gente. E eu que falo tanto sobre "inspiração" e plágio.

Veja o efeito aplicado aqui. Se gostou, siga com o tutorial.

1. Procure por ]]></b:skin> e acima dessa tag, cole o seguinte:

#demo-5{position:relative;

-webkit-transition-duration: 250ms;}

#demo-5 .details{

opacity: 0;

position:absolute;

top:0;

left:0;

margin-left:-200px;  -webkit-transition: margin-left;

-webkit-transition-timing-function: ease-in;

-webkit-transition-duration: 250ms;

}

#demo-5:hover .details{

opacity: .8;

margin-left:0;

 background: #CORDOFUNDO;

font-size: 12px;

text-align: center;

width: LARGURApx;

height: ALTURApx;

-webkit-transition-duration: 250ms;}

Altere as coisas em negrito/sublinhado pelo que elas dizem e depois salve.

2. Em um gadget de HTML/JavaScript, cole:

<div id="demo-5" class="demobox">

<img src="LINKDAIMAGEM"/>

<div class="details">

<h3>TEXTO MAIOR</h3>

<p>TEXTO MENOR</p></div></div>

Altere as coisas em negrito/sublinhado pelo que elas dizem e depois salve.