07/08/2012

Tutorial: Efeito de opacidade nas imagens

||

Bom dia pessoal! Hoje trago um tutu bem facil para vocês. Algo que o pessoal anda usando mundo em imagens de afiliados, que deixa uma aparencia mais detalhada no blog. Tem varias formas de colocar. Ela ficara mais ou menos assim, dependendo da intensidade que você desejar.


Se você desejar colocar apenas em algumas imagens do seu blog use esse codigo:

 <a href="LINK DO SITE" target="_blank"><img onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' style='opacity: 0.4;' src="URL DA IMAGEM" border="0" /></a><br />

Agora se quiser colocar em todos os afiliados de uma forma mais rapida vá em:

Design >> Designer de modelo do Blogger  (Antiga interface)
Modelo >>Personalizar >> Prosseguir (Nova interface)

Procure por:

 ]]></b:skin>

E acima dele cole isso:

#abc img{
opacity: .3;
 filter:alpha(opacity=30);
 -moz-opacity: 0.3;
 -khtml-opacity: 0.3;
 background:#fff;
}
 #abc img:hover
{
opacity:5.0;
 filter:alpha(opacity=500);
-moz-opacity: 5.0;
 -khtml-opacity: 5.0;
  }


Salve e prontinho, agora quando quiser usar o efeito use esse codigo:

<div id="abc"> <a href="LINK DO SITE" target="_blank"><img src="URL DA IMAGEM" border="0" /></a><br/> </div>

Nenhum comentário:

Postar um comentário

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