
In this tutorial, we are going to see how to remove image color on hover using jQuery. In the previous tutorial, we have seen how to do fade in/fade out animation using jQuery.
We are handling image background animation by using CSS class selector. Using jQuery we are adding and removing the class on mouse-over and mouse-out events respectively.
These are the image tags in which we have to apply the jQuery remove color animation.
<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)" />
These two jQuery functions are used to add/remove CSS styles to create a black and white effect on images.
<script type="text/javascript"> function show_grey(obj) { $(obj).addClass("grey-scale"); } function show_original(obj) { $(obj).removeClass("grey-scale"); } </script>
and the style is,
<style> .grey-scale{-webkit-filter: grayscale(100%); filter: grayscale(100%);} </style>