Slider

espacios slider









7 nov. 2014

Tutorial: Efectos imágenes


Hola mis queridos seguidores image¿qué tal les fue? hoy les traigo unos hermosos efectos para sus imágenes para que les quede muy kawaii en su blog ¿empezamos?image


Efecto imagen 1



img{
opacity:1;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
opacity:0.4;
}
Efecto imagen 2



img{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-filter: grayscale(0.8);}

Efecto imagen 3


img{
border:1px solid #eee;
padding:3px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
img:hover{
transform: rotate(206deg) scale(0.791) skew(1deg) translate(-2px);
-webkit-transform: rotate(206deg) scale(0.791) skew(1deg) translate(-2px);
-moz-transform: rotate(206deg) scale(0.791) skew(1deg) translate(-2px);
-o-transform: rotate(206deg) scale(0.791) skew(1deg) translate(-2px);
-ms-transform: rotate(206deg) scale(0.791) skew(1deg) translate(-2px);}

Efecto imagen 4



img { fondo: transparente: box-shadow: 0px 0px recuadro 0 # CCE7FF; -webkit-transición: todos los 0.8s facilidad de salida; -moz-transición: todos los 0.8s facilidad de salida; transición: todos los 0.8s facilidad de salida; padding: 5px; frontera: 2px solid # FFE8E8; img: hover { box-shadow: 0px 1px 260px recuadro # E8F5FF, inserción -260px 0px 1px # CCE7FF;}


 Espero que les haya servido doy créditos al blog Wanaseoby image

2 comentarios: