Gostou do blog ? então curta nossa página no Facebook:

Efeito Opacity - Transparência na Imagem

Este recurso permite que você aplique o efeito opacity ou seja transparência na imagem existem varias maneiras de aplicar este efeito leia abaixo:


1) Aplicar a todas as imagens publicadas nas suas postagens
2 Ou em determinadas imagens escolhidas por você





Aplicando o efeito de transparência em todas as imagens do blog postada


Para colocar o efeito basta ir em layout, aditar html "não marque a Expandir modelos de widgets"
e procure por:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

E SUBSTITUA tudo por:

.post img {
filter: alpha(opacity:0.5);
KHTMLOpacity: 0.5;
MozOpacity: 0.5;
-khtml-opacity:.50;
-ms-filter:"alpha(opacity=50)";
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;;
}
.post img:hover {
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}

E agora clique em salvar !

Aplicando o efeito transparência apenas em determinadas imagens:


Para colocar o efeito em determinadas imagens basta você inserir o código situado abaixo dessa imagem:

Imagem Linkada - (passe o mouse)



<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="ENDEREÇO-DA-IMAGEM" /></a>

E altere onde esta escrito:
ENDEREÇO-DA-IMAGEM por o url da sua imagem escolhida
LINK-AQUI por link de redirecionamento do link escolhido

2 comentários:

Janzao disse...

Teu blog ta muito massa e cheio de ajuda mano! obrigado, continuem asim.

BlogQueBesta disse...

Parabens blog SHOW me ajudou pra karamba com esse post... ObrigadoO...

© 2010 | Rei do Bloguinho |Todos os direitos reservados
topo ↑