Adicionando efeito as imagens do blog

Ohayo Minna!

Bem, hoje trago-lhes um tutorial de HTML bem legal que deixa seu blog muito mais fofo ♥, colocar efeitos nas imagens do blog assim que você passa o mouse por cima delas. Primeiramente, quero lhes avisar que vocês podem utilizar mais de um efeito, e "segundamente" que você pode se quiser não utilizar o Editor HTML, e sim o CSS, mas eu em particular recomendo você que faz seus próprios templates e muda e tals não usar o CSS, porque eu mesma nunca consegui remover algo que coloquei no CSS. (NUNCA)

Vamos ao tutorial, agora, clique em "Leia Mais".

Vamos começar o básico né: Vá no Painel do Blogger e selecione o blog que você quer adicionar efeito nas imagens, depois vá em Modelo e em Editar HTML, aparecerá uma grande "caixa" de códigos do seu blog, clique dentro dela com seu mouse e aperte Ctrl F no seu teclado, abrirá uma mini caixinha de pesquisa e nela procure por:

]]>

Agora ACIMA dessa tag cole os códigos do(s) efeito(s) que você preferir, códigos por Having Cherry (www):

Sépia:

.main img {-webkit-filter:
(0%);
transition: all 1s ease;}
.main img:hover {-webkit-filter: sepia(80%);
-moz-transition: all 2s ease;
}

Preto e branco:

.main img {
-webkit-filter:
(0%);
transition: all 1s ease;}
.main img:hover {
-webkit-filter: grayscale(90%);
-moz-transition: all 2s ease;
}

Negativo:

.main img {
-webkit-filter:
(0%);
transition: all 1s ease;}
.main img:hover {
-webkit-filter: invert(80%);
-moz-transition: all 0s ease;
}

Opacidade (Imagem mais clara):

.main img {
-webkit-filter:
(0%);
transition: all 1s ease;}
.main img:hover {
-webkit-filter: opacity(80%);
-moz-transition: all 0s ease;
}

Os trechos em Negrito vocês poderão editar, quanto maior o número, mais quantidade de efeito, quanto menor o número, menos intensidade no efeito (ou vice-versa, não lembro bem, mas você pode editar quantas vezes quiser). Agora que expliquei sobre os códigos que acabei de passar, vou ensinar o efeito desfoque, ele não é do Having Cherry.

Desfoque:

.post img {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.post img:hover {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: blur(2px); color:#fff;
}

Bem gente, foi isso e bye bye ♥