Blogger - Propriedade "opacity" em imagens

http://amotrix.webs.com/Imagens/Logo.PNG
  A propriedade opacity é nada mais do que a aplicação de transição de opacidade durante o usuário passar o mouse, aplicando também a propriedade hover, ou seja, com essa propriedade migrada nas imagens não será mais preciso criar duas imagens e adiciona o efeito mouse over.

Obs.: Neste artigo você aprenderá a adicionar efeito a todas imagens contidas no blog, em alguns templates não será habilitada a função no sidebar. Caso você esteja querendo o código da propriedade para ser aplicada em imagens individuais, clique aqui


AdvertênciaAdvertência: lembrando que vamos atuar na parte interna do HTML, ou seja, no HTML central do blog, antes de efetuar o processo de habilitação da propriedade, recomendamos que você faça um backup do seu template e testar em um blog de testes.


Adicionando a propriedade

Efeito Desclareamento

   Após toda a explicação e advertências de como o código vai agir após ser migrado as imagens do blog, vamos começar:

1 - Entre em Modelo | Painel > Mais Opções > Modelo
2 - Clique em Editar HTML
3 - Clique em na caixa Expandir modelos de widgets
4 - Agore procure por:
.post img {
padding:4px;
border:1px solid $bordercolor;
}

   Caso não tenha achado o código citado acima, procure por:  .post-body img { — pois em alguns blogs a etiqueta responsável pelas imagens pode se modificar de acordo com o modelo.

5 - Selecione-o todo e substitua 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;
}


6- Clique em Salvar Modelo

Efeito Clareamento

1 - Entre em Modelo | Painel > Mais Opções > Modelo
2 - Clique em Editar HTML
3 - Clique em na caixa Expandir modelos de widgets
4 - Agore procure por:
.post img {
padding:4px;
border:1px solid $bordercolor;
}

   Caso não tenha achado o código citado acima, procure por:  .post-body img { — pois em alguns blogs a etiqueta responsável pelas imagens pode se modificar de acordo com o modelo.

5 - Selecione-o todo e substitua 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;
}


6- Clique em Salvar Modelo

--//--
   Pronto, pode conferir o seu blog na página inicial ou em uma postagem/página. Caso a propriedade não tenha dado certo entre em contato ou deixe um comentário. Se tenha dado certo, por favor, comente para saber que o código está ativo. Caso não, também comente. E trataremos de achar o erro.

 Com a migração da propriedade a todas as imagens do blog, em alguns layouts por modificação de estilo para os modelos Dynamic Views. Além disso em versões móveis (mobile) o efeito da propriedade não será habilitado, somente em visualizações em web page.

 




Comentários