Remove Image Color using jQuery
by Vincy. Last modified on July 12th, 2022.
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.
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 a black and white effect on images.
function show_grey(obj) {
$(obj).addClass("grey-scale");
}
function show_original(obj) {
$(obj).removeClass("grey-scale");
}
and the style is,
.grey-scale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.