Olá, boa noite, hoje eu trouxe um efeito de reflexo que você usa na imagem, achei muito bonito e adaptei o códigos do tumblr para o blog.
Créditos: greathelp.tumblr.com
Primeiro, vá no seu código HTML tecle CTRL+F e procure por: ]]></b:skin> e cole o seguinte código acima de ]]></b:skin> :
#popo img {
margin: 5px;
opacity: 0.5; /* Opacidade da Imagem */
border: 4px solid #4C627B; /* Largura da Borda e Cor */
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.5)));
}
#popo img:hover {
opacity: 1; /* Opacidade */
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
}
Agora vá em Layout > Adicionar um Gadget > HTML/Javascript e cole esse código:
<div id="popo">
<div style="text-align: center;">
<img src="URL DA SUA IMAGEM" />
</div>
</div>
Pronto agora é só colocar o url da sua imagem onde esta destacado em rosa.
Nenhum comentário:
Postar um comentário