23/12/2012

Tutorial: 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.

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

#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 partes em negrito como se pede, e salve. Vá ate seu layout e abra um 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>

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

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