Eliminar el color de una imagen con jQuery

En este tutorial vamos a ver cómo eliminar el color de una imagen al hacer hover utilizando jQuery. En otros tutoriales, hemos visto como hacer la animación de fadein o fadeout mediante jQuery, y si te resultaron fáciles, esto es muy similar.

Gestionaremos la animación de la imagen mediante un selector de clase de CSS. Utilizaremos jQuery para añadir o eliminar la clase al hacer hover en la imagen. Es decir, al hacer hover agregaremos color o al salir de la imagen, volveremos al blanco y negro.

HTML de las imágenes con animación de jQuery

A continuación tienes los tags de las imágenes en las cuales aplicaremos la animación de eliminar el color.

<img src="fading-photo.png" onMouseOver="show_grey(this)" onMouseOut="show_original(this)" />
<img src="fading-photo1.png" onMouseOver="show_grey(this)" onMouseOut="show_original(this)" />
<img src="fading-photo2.png" onMouseOver="show_grey(this)" onMouseOut="show_original(this)" />

Función de jQuery para eliminar el color de una imagen

Estas dos funciones de jQuery las utilizaremos para añadir/eliminar estilos de CSS para crear un efecto de blanco y negro en las imagenes.

<script type="text/javascript">
function show_grey(obj) {
$(obj).addClass("grey-scale");
}
function show_original(obj) {
$(obj).removeClass("grey-scale");
}
</script>

...y el estilo sería:

<style>
.grey-scale{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style>

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.