Efecto En Imágenes {Hover} Part1

que programa usas para hacer esos efectos o que pagina ?
Hola!♥ Primero, Antes Que Nada, Perdón Por Contestar Los Pedidos Tarde, Es Que No Tenia Tiempo & Estoy Preparando Manualidades Para Publicar.

¿Como Dar Distintos Efectos A Imágenes Con CSS?

No, No Uso Ningún Programa & Ninguna Pagina, Solo Que Como Muchos Otros Códigos Aprendí Aquellos Que "Afectan" A Imágenes:

Los Básicos Son {digo básicos  ya que se puede afectar a una imagen con diferentes códigos  ya mostraren en la parte dos}:

blur

img{ -webkit-filter: blur(1px);}

contrast

{lo use en "Luz Intensa"}

img{ -webkit-filter: contrast(2);}

hue-rotate

{lo use en "Efecto Rainbow"}

img{ -webkit-filter: hue-rotate(300deg);}

invert

img{ -webkit-filter: invert(1);}

saturate

img{ -webkit-filter: saturate(2);}

opacity

{el comúnmente utilizado}

img{ -webkit-filter: opacity(0.4);}

grayscale

img{ -webkit-filter: grayscale(0.9);}

drop-shadow

img{ -webkit-filter: drop-shadow(-4px 4px 7px #999);}

sepia

img{ -webkit-filter: sepia(0.9);}

brightness

{el que mas me gusta >3<}

img{ -webkit-filter: brightness(0.2)}

Para Crear Tu Efecto Original, Juega Con Los Números Hasta Encontrar Algo Único & Divertido, Pero No Mezcles Muchos & En Cantidad, No Dan Un Lindo Resultado & Cargan Mucho El Blog.

Para Que Puedas Guiarte Mejor, Hay Un Generados Que Puedes Usar Como Ayuda, Pero Solo Te Da El Código De Efecto:

CSS Filter Effects

Para Que Afecte A Tus Imágenes & Les De Esa "MAGIA" Al Pasar El Cursor Coloca:
Efecto SOLO Al Pasar El Cursor:

img {
webkit-filter: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
img:hover {
webkit-filter: EL EFECTO QUE QUIERAS;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

EJEMPLO:
contrast & hue-rotate

img {webkit-filter: none;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;} img:hover {-webkit-filter: contrast(2) hue-rotate(300deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease}

Efecto DESAPARECE Al Pasar El Cursor:

img {
webkit-filter: EL EFECTO QUE QUIERAS;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
img:hover {
webkit-filter: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

EJEMPLO:
contrast & hue-rotate

img{ -webkit-filter: contrast(2);}

Espero Que Haberte Ayudado!
& A Ser Originales Con Los Efectos,
¿Quien Logra El Mas Llamativo?