Efectos en Imagenes

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 :)
REFERENCIA "ANNYS KAWAII WORLD"......
Firma Post


No hay comentarios:

ir arriba