Blogger - Propriedade "opacity" em imagens [efeito suave]

Olá caros Bloggers, hoje iremos com mais um tutorial para dar efeito as imagens em seu blog, diferente ao já publicado aqui — Blogger - Propriedade "opacity" em imagens — o efeito será usado com outra propriedade, a "transitionas" que com qualificações dará a bele transição suave.

Enfim, já foi discutido os detalhes, agora vamos a ação. Lembrando presta atenção a cada detalhe de processo de aplicação do efeito ao seu site. Então, vamos começar:

Aviso:
Antes de começar, por faovr, siga as recomendações abaixo:

faça um backup de seu template; e/ou
teste primeiramente em um blog de testes.

Acesse o Blogger e faça seu login.

Efeito Desclareamento

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-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
    filter: alpha(opacity:0.5);
    KHTMLOpacity: 0.5;
    MozOpacity: 0.5;
   -webkit-transform:scale(1.0);
   -moz-transform:scale(1.0);
   -o-transform:scale(1.0);
   -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   opacity: 0.7;
   -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
    filter:alpha(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