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"......
No hay comentarios: