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
Código:.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
Neste efeito, a imagem já está com o efeito, ai quando você passa o mouse em cima ela fica normal.Código:
.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
Esse efeito é o mais simples de todos. As imagens só ficam arredondadas.Código:
.post img {Mude o 10 para maior ou menor. Quanto menor, menor a borda. Quanto maior, maior a borda.
-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;
**Créditos**
0 leitores soltaram o verbo:
Postar um comentário
Leia, é importante!
✖ - Todos os comentários serão lidos e quando possível, respondidos;
✖ - Comentários com apenas "Oi, segue o meu blog?" não serão publicados;
✖ - No final do comentário deixe o link do seu site ou blog para que eu possa retribuir a visita;
✖ - Encomendas e pedidos deverão ser feitos na Ask (menu).
Obrigada por comentar e volte sempre!