Olá sweets!!! Desculpe não está postando frequentemente, pois tenho muito trabalho de escola e as minhas provas irão começar segunda-feira e os professores estão enchendo a gente de trabalhos.
Gente se vocês tiverem algum pedido de tutorial ou utilitários é só pedi na ask que frei o máximo para fazê-los. Vamos ao post de hoje.
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>
E acima dele cole o código do efeito escolhido.
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;
}
Espero que tenham gostado!!!
