Greyscale Hover Effect using CSS and JQuery

blitzcoder's Avatar author of Greyscale Hover Effect using CSS and JQuery
This is an article on Greyscale Hover Effect using CSS and JQuery in Web Design, HTML And CSS Tutorials.
Rated 1.00 By 1 users
If you have never tried this before, it is an excellent implementation for buttons and images. What I am teaching here? We are going to learn how to fade an image to its greyscale equivalent by using CSS sprites and JQuery.

Before we begin check out the working example. Now, lets see the HTML part of the code,

HTML Code:
<ul class="gallery">
		<a href="#" class="thumb"><span><im g src="image" alt="" /></span></a> <!-- This is the normal image -->
Each list will contain an image which is nested within a <span> tag. The <span> tag will be used to crop the image to only show its default state.

Now the CSS part. It is pretty easy to understand now that you know the HTML part,

Code: {
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0; padding: 0;
} li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
} li a.thumb {
	width: 204px; /*--Width of image--*/
	height: 182px; /*--Height of image--*/
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
} li span { /*--Used to crop image--*/
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
} li a.thumb:hover {
	background: #333; /*--Hover effect for browser with js turned off--*/
} li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
} li a {text-decoration: none; color: #777; display: block;}
Now comes the most important part, JQuery. That is, the animation.
<script type="text/javascript"
<script type="text/javascript">
$(document).ready(function() {

	$(" li").hover(function() { //On hover...

		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Now we'll assume that the grayscale version of the image has a 'g' at the starting. So lets modify the thumbOver variable
		//Set a background image(thumbOver,i.e., the grayscale image) on the <a> tag - Set position to bottom
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
	} , function() { //on hover out...
		//Fade the image to full opacity 
		$(this).find("span").stop().fadeTo('normal', 1).show();

If you read all the comments properly, you will know whats happening! Now go and show off your newly acquired skills!
johngate2100's Avatar, Join Date: Aug 2010
Light Poster
This is very nice.I tried this literally and this work good.And i will suggest people to copy this because this is correct.
prestashopic's Avatar, Join Date: Sep 2010
Newbie Member
Thanks for you good sharing. It really help me.
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
If you liked this article do nominate this article for Article of the month - Sep 2010 Before 15th of October 2010.
kurisu21's Avatar, Join Date: Dec 2010
Newbie Member
Is it just me or is this code looks a lot or I should say the same as Soh Tanaka's tutorial with this threads same title.

What a shame, even asking for the members to vote for this article.
raju_mars's Avatar, Join Date: Apr 2010
Light Poster
Thanks Boss U write Nice Script..
adyz's Avatar, Join Date: Jan 2012
Newbie Member
Can we do the revers? From gray to color image?
devnty06's Avatar, Join Date: Feb 2010
Newbie Member
Hey thanks for sharing the tips.