Imagens do Post em P&B (Hover)

Olá crazyrs, como estão? Aqui é a Brenda. Eu estou em um escola de PS (pschool) e minhas primeiras aulas serão de HTML, cara, to começando a me arrepender de ter entrado, eu tenho pouco tempo para tomar conta de tanta coisa, só tumblr são 4 :s e HTML tem muito assunto, mas enfim, espero que tudo dê certo. O tutorial de hoje é um hover nas imagens em preto e branco, espero que gostem.

As imagens ficarão como a desse Layout. porém sem o zoom.

Esse tutorial é mais simples do que você imagina. Procure por .post img ou talvez as imagens do seu post esteja com um nome diferente no HTML, dá uma olhadinha e qualquer dúvida me pergunte.

Lá vai ter .post img { algumas coisas;} substitua todo o código por esse:

.post img {
padding:0px;
margin-left: -10px;
-webkit-filter:
grayscale(100%); -moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
}

Então suas imagens já estarão em preto e branco, agora para adicionar o hover para a imagem normal , abaixo do código que acabou de adicionar cole:

.post-body:hover img  {
-webkit-transform: scale(1.1);
webkit-transform-origin: 50% 50%;
-o-transform: scale(1.5);
-o-transform-origin: 50% 50% 0;
transform: scale(1.5);
transform-origin: 50% 50% 0;
-webkit-filter:
grayscale(0%); -moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
}