Dois efeitos CSS para as imagens dos posts do seu blog

Olá galera do bem! Hoje venho trazer pra vocês 2 Efeitos para Imagens do Post que eu mesma fiz. Vamos lá! 

Para colocar o efeito escolhido em seu blog é só ir em Modelo>> Editar HTML>> Clique dentro da caixa de HTML e depois aperte Ctrl+F e procure por:

]]></b:skin>

1° EFEITO

O primeiro efeito é esse que uso aqui nas imagens de post do blog, que dá um efeito opacidade e muda a cor da borda.

.main img { filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; -webkit-transition-duration: .50s; } .main img:hover { filter:alpha(opacity=60); -moz-opacity:0.60; opacity:0.60; -webkit-transition-duration: .50s; } .post img{border: 1px solid #000;} .post a:hover img{border: 1px solid #ff0000;}

2° EFEITO

Esse aqui a imagem ganha uma borda que muda de cor quando passa o mouse em cima.

.main img { border-radius: 3px; color: #ffffff; text-shadow: 1px 1px 0 #b8d8d5; margin-left: -0px; margin-right: -0px; padding: 5px; background: #000; -moz-box-shadow: inset 0 0 0 0px #fff; -webkit-box-shadow: inset 0 0 0 0px #fff; box-shadow: inset 0 0 0 0px #fff; -webkit-transition-duration: 1s; } .main img:hover { background: #ff0000; -moz-box-shadow: inset 300px 0 0 0 #000, inset -300px 0 0 0 #fff; -webkit-box-shadow: inseet 300px 0 0 0 #deedec, inset -300px 0 0 0 #fff; box-shadow: inset 300px 0 0 0 #000, inset -300px 0 0 0 #fff; text-shadow: 1px 1px 0 #000; }

Salve e pronto!

FAÇA BOM USO. ATÉ A PRÓXIMA!