Efeito CSS3 Para Imagens Da Postagem

Olá Galera ( Ou Querido leitor ) Hoje venho trazendo um tutorial bem legal!

Mas Como Assim? Neste post venho ensinando como colocar um efeito nas imagens do seu blog!

O Efeito e o seguinte: Quando você ver a imagem ela esta com o efeito Opacity                              (Transparência Na Imagem )

E quando passamos o mouse sobre a imagem você observara um efeito transição.

E por ultimo uma elegante sombra atrás da imagem.

Mas o melhor neste efeito ele ficará automaticamente nas imagens.

Mãos ao Tutorial:
1. Acesse o painel do seu Blog e clique na Guia Modelo.
2.  Depois Clique em  Editar HTML.
3. Em seguida segure as teclas CTRL+F ( Atalho de busca ) e procure por:

]]></b:skin>

4. E ACIMA dele adicione o seguinte código:

.post-body img {padding: 6px !important;background: transparent !important;-webkit-transition: all 0.8s linear !important;border: 1px solid #C8C6C6 !important;-webkit-border-radius: 8px !important;-moz-border-radius: 8px !important;border-radius: 8px !important;transition: all 0.3s ease !important;-webkit-transition: all 0.8s ease !important;-o-transition: all 0.8s ease !important;-moz-transition: all 0.8s ease !important;opacity:0.5 !important;}
.post-body img:hover {opacity:1 !important;-webkit-box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;-moz-box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;box-shadow: 0px 0px 15px 1px rgba(168, 168, 168, 0.7) !important;}

5. Depois clique em Salvar Modelo.
Pronto.
                                                                                                                                        
                                                                           Estilo Desenvolvido por Kevin Oliveira