Para quem não sabe, efeito opacidade é quando a imagem fica mais clara ao passar o Mouse ou sem passar os Mouse. E aproveitando o momento, eu vou ja fazer um tutorial de como deixar as imagens arredondadas. Let's go?
.post-body {Após a chave destacada, você vai por um dos códigos que eu vou dar, escolha o que você preferir.
line-height: 1.4;
position: relative;
}
Bem, o efeito 1 é simples. A imagem a principio está normal, mas quando você passa o mouse em cima ela fica mais clara, com o efeito Opacidade.
Efeito 1
.post img {
-webkit-transition-duration: .50s;
}
.post img:hover {
-webkit-transition-duration: .50s;
filter:alpha(opacity=70);-moz-opacity:0.70; opacity:0.70;
}
Efeito 2
Código:
Esse efeito é o mais simples de todos. As imagens só ficam arredondadas.
.post img {
-webkit-transition-duration: .50s;
filter:alpha(opacity=70);-moz-opacity:0.70; opacity:0.70;
}
.post img:hover {
-webkit-transition-duration: .50s;
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
Efeito 3
Código:
Mude o 10 para maior ou menor. Quanto menor, menor a borda. Quanto maior, maior a borda.
.post img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Arredondando as imagens
Para arredondar as imagens é muito mais simples do que se parece. Primeiro, você copia este código:-webkit-border-radius: 10px;E cola entre a chave do código das imagens acima. Mude o 10 para maior ou menor.
-moz-border-radius: 10px;
border-radius: 10px;
Parabéns pelo Post, direto e objetivo, ja tinha feito muitas outras tentativas e nada, esse funcionou, Obrigado.
ResponderExcluirhttp://golbolinhaecia.blogspot.com.br