Voltei & Tutorial: Imagens iguais a do blog

A casa dos meus sonhos

Oi meus amores

E aí? Gostaram do layout do blog? Eu amei e por isso, durante um tempo, vou trocar somente o cabeçalho e outros pequenos detalhes nele. Sabem, para não ficar mudando de layout o tempo inteiro porque isso necessita de tempo e tempo é o que eu não estou tendo ultimamente.

E esse é o motivo do meu sumiço.

Deveres, trabalhos de escola, aula de dança, de teatro, de inglês e eu estou pirando! Mas prometo não deixar o blog de lado, pelo menos três postagens na semana ok?

Agora vamos parar de blá-blá-blá e vamos ao tutorial. Clique em Leia mais para vê-lo.

 

Ok *respira* viram as imagens do blog? Todas redondinhas e com opacidade quando passa o mouse e tal. Eu vim ensinar a fazer isso hoje.

Primeiro, vá no seu HTML, dê ctrl+f e procure por /* Posts .

Achou? Excelente. Agora, abaixo desse código cole o seguinte código:

.post img {
filter:alpha(opacity=82);
-moz-opacity:1.0;
opacity:1.0;
-webkit-transition: 0.5s;
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
.post img:hover {
filter:alpha(opacity=100);
-moz-opacity:0.82;
opacity:0.82;
duration: 50s;
}

Se você não quiser bordas arrendondadas tire o código em vermelho. Se você quiser que a imagem fique com opacidade normal e quando se passar o mouse ela fique normal coloque em vez do código acima o seguinte código:

.post img {
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
-webkit-transition: 0.5s;
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
.post img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;
}

OBS:Esse tutorial vale apenas para as imagens do post.

Bom, espero que tenham gostado do tutorial. Comentem sobre o que acharam do novo layout e qualquer dúvida é só perguntar ok? 

Beijos!