Imagens Arredondadas e Com Efeito Opacidade

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?

 Primeiro, você vai procurar por .post-body { , você vai achar algo assim:

.post-body {
  line-height: 1.4;
  position: relative;
}

Após a chave destacada, você vai por um dos códigos que eu vou dar, escolha o que você preferir.

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 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Mude o 10 para maior ou menor. Quanto menor, menor a borda. Quanto maior, maior a borda.

Arredondando as imagens

Para arredondar as imagens é muito mais simples do que se parece. Primeiro, você copia este código:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

E cola entre a chave do código das imagens acima. Mude o 10 para maior ou menor.