Tutorial - Efeito Surprise para moderadores


Boa Noite, gente.

Acho que nem precisa mais eu me desculpar por só postar agora que vocês já devem saber que agora no meu período de aulas eu estou postando bem menos por causa de tarefas e porque esses dias está muito quente aqui onde eu moro, quem dera morar em outro lugar.

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> 

7 comentários:

Regras:
• Os comentários são moderados.
• Não xingue nada nem ninguém.
• Comentários como: "Seguindo, segue de volta ?" serão deletados.
• Se for fazer uma crítica faça com educação e bom senso.
• Pedidos feitos por comentário não serão realizados, pedidos só na ask.
• Obrigado por comentar!