sábado, 16 de março de 2013

Tutorial - Efeito Surprise para moderadores


Deliciiia! <3


trouxe pra você hoje um efeito bem legal que eu achei no Html Strew, que é um efeito para ser usado com moderadores, ou não, pra mim é ideal como efeito de moderadores, ele tem a imagem e aparece uma descrição hover de cima e tals, bem como eu não sei explicar podem ver a preview aqui. Eai gostaram do efeito ? Então vamos aprender !



1. Cole o seguinte código acime de ]]></b:skin> ajustando só o que está em negrito.

/*** efeito surprise ***/.mod {width:LARGURA-DA-CAIXApx; height:ALTURA-DA-CAIXApx; overflow:hidden; border:5px solid #F9CDAD; -webkit-transition-duration:0.7s; margin-top:3px}.imagem {width:LARGURA-DA-IMGpx; height:ALTURA-DA-IMGpx; -webkit-transition-duration:0.7s; position:absolute; overflow:hidden}.imagem:hover .texto {margin-top:0px; -webkit-transition-duration:0.7s;}.texto {background-color:#FUNDO-DO-TEXTO; color:#COR-DA-FONTE; font-size:10px; text-align:center; width:LARGURA-DO-TEXTOpx; height:ALTURA-DO-TEXTOpx; margin-top:-LARGURA-DA-CAIXApx; padding:5px; -webkit-transition-duration:0.7s; opacity:0.8;} 

2. Para usar coloque o seguinte código em um gadget de HTML/Javascript:

<div class="mod">
<img class="imagem" src="URL-DA-IMAGEM">
<div class="texto"><br>texto aqui baby</div>
</div> 

2 comentários:

  1. adorei o blog.
    estou seguindo aqui , :D
    da uma passadinha lá ?
    beijoos .

    http://garotasolitariaemparis.blogspot.com.br/
    http://garotasolitariaemparis.blogspot.com.br/

    ResponderExcluir
  2. Que interessante esse efeito, gostei!


    beijinhos :)

    http://biaschultz.blogspot.com.br

    ResponderExcluir