Remove Image Color using jQuery

In this tutorial we are going to see how to remove image color on hover using jQuery. In previous tutorial, we have seen how to do fadein/fadeout animation using jQuery.

We are handling image background animation by using CSS class selector. Using jQuery we are adding and removing class on mouse-over and mouse-out events respectively.

View Demo


HTML Images with jQuery Background Animation

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)" />

jQuery Function to Remove Image Color

These two jQuery functions are used to add/remove CSS styles to create black and white effect on images.

<script type="text/javascript">
function show_grey(obj) {
function show_original(obj) {

and the style is,

.grey-scale{-webkit-filter: grayscale(100%); filter: grayscale(100%);}

View DemoDownload

This jQuery code tutorial was published on February 5, 2015.

↑ Back to Top