23/12/2012

Efeito Descrição Hover


Yo meus bunnys lindinhos, como vão vocês? Achei um efeito bem legal de descrição hover, o efeito e simples porém e bem legal. Os créditos são do blog KW , como eu disse o efeito e bem simples mas achei bem legal. Se quiser dar uma olhada no efeito antes de aplica-lo em seu blog basta clicar no link que se encontra mais abaixo.

1. Siga ate seu HTML  e use o Ctrl+F pra achar ]]></b:skin>, e acima dele cole:

Códigos
#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;}

 2. Altere as partes em negrito como se pede, e salve. Vá ate seu layout e abra um HTML/JavaScript, cole:

Códigos
<div id="demo-5" class="demobox">
<img src="LINKDAIMAGEM"/>
<div class="details">
<h3>TEXTO MAIOR</h3>
<p>TEXTO MENOR</p></div></div>


6 comentários:

  1. Obrigada, eu também lhe desejo feliz natal é Ano novo.
    Você também tenha uma
    Feliz vespera de natal ♥

    ResponderExcluir
  2. Arigatō, Drw eu também desejo toda a sua familia! Que você tenha uma otima semana festiva. eu sou de Leão *-*

    ResponderExcluir
  3. Hihi arigatou!!!
    Ohh maneiro *-*

    ResponderExcluir
  4. Oiie,tem algum mode de aumentar a parte a fonte do "Texto Maior" ??

    ResponderExcluir
    Respostas
    1. Não pós usam só h3, teria que fazer modificação no código para transforma lo em uma classe.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345