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.
5 Comentários
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:25RSRSRSRS, Obrigado!
4 de janeiro de 2012 às 15:34Caio, escuta, como coloco este efeito nos parceiros e nas paginas do meu blog?
4 de janeiro de 2012 às 17:51Espero..
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:43Muito bom o site de vocês, mais já existe um site com o nome tecnoblog
10 de março de 2013 às 16:14Postar 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!