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>