Efeitos nas imagens do blog [Variados]

Yo! Yo! Yo bunnie's! Hoje não trago exatamente um tutorial, mas sim códigos de efeitos. Todos nós conhecemos o famoso efeito opacidade em imagens, preto e branco etc... porém existe muitos mais e hoje trouxe alguns. Eles estão assim sem lisos. Mas se você saber utiliza-los pode criar outros efeitos de imagens bem legais, por exemplo mesclar alguns deles os equilibrando.

Eu deixei o código com . main img, porém você pode utilizar em outros lugares como nas imagens da postagem, da sidebar, ou apenas em uma especifica. Supomos que queira criar um avatar para a sidebar de "bem vindo" e a tag do avatar se chama .beijo: dentro do corpo do código você  pode adicionar o o código de efeito:

.beijo {

-webkit-filter: sepia(1);

width: 120px;

height: 140px;

}

Também funciona em menus, dependendo de como ele for. Bom agora sem mais delongas aqui vai os códigos.

Opacidade (Opacity)

.main img {
-webkit-filter: opacity(0.7);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Preto e Branco (Grayscale)

.main img {
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Borrado (Blur)

.main img {
-webkit-filter: blur(3px);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Sépia

.main img {-webkit-filter: sepia(1);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Saturação (Saturate)

.main img {
-webkit-filter: saturate(4);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Brilho/ A imagem fica mais escura (Brightness)

.main img {
-webkit-filter: brightness(0.5);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Efeito Azulão/ Negativo em azul ( Hue Rotate)

.main img {
-webkit-filter: hue-rotate(180deg);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Invertido/ Negativo (Invert)

.main img {
-webkit-filter: invert(100%);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Contrate (Contrast)

.main img {
-webkit-filter: contrast(4);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}