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!
0 Comentários