Efectos en Imagenes

Hoy voy a mostrar varios efectos que pueden poner a sus imagenes okei? son muy llamativos y muy faciles de usar..

TODOS los codigos se pegaran antes de ]]></b:skin>

empezemos con el primero:

EFECTO SEPIA

Codigo:

.post-body img {filter: sepia(100%);-webkit-filter: sepia(100%); -moz-filter: sepia(100%);-webkit-filter(1);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}.post-body img:hover{filter: sepia(0%);-webkit-filter: sepia(0%); -moz-filter: sepia(0%);-webkit-filter(0);}

*** si lo quieres invertido osea de imagen normal a efecto sepia estes es el codigo: ***

img{

-webkit-transition: all .7s linear;

-moz-transition: all .7s linear;

transition: all .7s linear

}

img:hover{-webkit-filter: sepia(100%);z-index: -99px;}

EFECTO GRAYSCALE

codigo:

.post img{-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);filter: url(desaturate.svg#greyscale);filter: gray; filter: grayscale(100%);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;} .post img:hover{-webkit-filter: grayscale(0);-webkit-filter: grayscale(0); -moz-filter: grayscale(0);filter: none; filter: grayscale(0);}

*** si lo quieres de imagen normal a efecto grayscale estes es el codigo: ***

img{-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear}

img:hover{-webkit-filter: grayscale(100%);z-index: -99px;}

EFECTO BLUR

codigo:

.post-body img{-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);} .post-body img:hover{filter: none; -webkit-filter: blur(0px);-moz-filter: blur(0px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}

*** si lo quieres de imagen normal a efecto blur estes es el codigo: ***

img{

-webkit-transition: all .7s linear;

-moz-transition: all .7s linear;

transition: all .7s linear

}

img:hover{-webkit-filter: blur(1px);z-index: -99px;}

INVERT EFFECT

codigo:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: invert(100%);z-index: -99px;}

EFFECTO CAMERA SHOT

codigo:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: brightness(15%);z-index: -99px;}

que tengan bonito dia :)