Aplicando o efeito Opacity nas imagens do Blog

► +A +/- -A

Olá pessoal, hoje ensinarei neste tutorial como aplicar em seu blog a propriedade Opacity, o Opacity e um efeito em que ao passarmos o mouse em cima da imagem aparece uma Transparência na imagem.
Exitem dois tipos de Opacity que poderemos colocar no blog, observe os exemplos:
Atenção: O meu e diferente pois as minhas imagens possui transition e uma borda azul, então em seu blog fica-rá diferente, caso você use algum transition em imagens de seu blog elas ficarão com transition, como você percebe.

Exemplo de imagem 1:

Exemplo de imagem 2:

Existem duas opções, você pode coloca-las em todas as posts automaticamente, ou em apenas em determinadas posts, ou seja quando você quiser em qualquer lugar de seu Blog.

Aplicando a transparência em todas as imagens dos posts



Este efeito que será aplicado em todos os posts automaticamente e o efeito da imagem 1.


1. Vá até a opção, Modelo, do seu blog.
2. Depois em Editar HTML.
3. E procure pelo seguinte código:


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


Caso você não ache o o código que citei acima, procure apenas o código que corresponde as imagens do seu blog, uma dica, caso você não ache e só procurar por .post-body img.


4. Ao encontrar o código correspondente as imagens do seu blog, substitua todo o código por este:



.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;
}

5. Caso queira adicionar o Opacity da imagem 2, Substitua por:

.post img {
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;}.post img:hover {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;}

Adicionando o Opacity em apenas determinadas imagens do Blog

Nesta parte você pode adicionar em qualquer lugar em que você queira no seu blog, parceiros, nas posts e etc...


A imagem será com o efeito da imagem 1 ( acima ), a imagem será linkada ( com link ).
1. Então para adicionar em determinado lugar, adicione o seguinte código:

<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>


Pronto, qualquer duvida seu comentário é Bem Vindo.
► Postagens Relacionadas:

5 Comentários

Robson Medeiros disse...

ERA OQUÊ EU ESTAVA PROCURANDO PARA COLOCAR NAS IMAGENS DO MEU BLOG, MUITO LEGAL ESTE EFEITO, OBRIGADO, POST MUITO LEGAL, SEU BLOG TAMBÉM É LEGAL. :)

4 de janeiro de 2012 às 10:25
Caio Vinicius disse...

RSRSRSRS, Obrigado!

4 de janeiro de 2012 às 15:34
Carliano disse...

Caio, escuta, como coloco este efeito nos parceiros e nas paginas do meu blog?
Espero..

4 de janeiro de 2012 às 17:51
Caio Vinicius disse...

Carliano, e só seguir a parte que eu citei no post: Adicionando o Opacity em apenas determinadas imagens do Blog, lá você poderá colocar os efeitos aonde você quiser no seu blog, copie e faça as modificações necessárias no código e funciona-ra corretamente.

4 de janeiro de 2012 às 18:43
Igor de Souza disse...

Muito bom o site de vocês, mais já existe um site com o nome tecnoblog

10 de março de 2013 às 16:14

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!