Greyscale Hover Effect using CSS and JQuery

Discussion in 'Web Design, HTML And CSS' started by blitzcoder, Sep 8, 2010.

  1. blitzcoder

    blitzcoder New Member

    Joined:
    Aug 24, 2010
    Messages:
    12
    Likes Received:
    2
    Trophy Points:
    0
    Occupation:
    Student
    Location:
    Surat, India
    Home Page:
    http://shreyagarwal.blog.com
    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:
    <ul class="gallery">
    	<li>
    		<a href="#" class="thumb"><span><im g src="image" alt="" /></span></a> <!-- This is the normal image -->
    	</li>
    </ul>
    
    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:
    ul.gallery {
    	width: 708px; /*--Adjust width according to your scenario--*/
    	list-style: none;
    	margin: 0; padding: 0;
    }
    ul.gallery 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--*/
    }
    ul.gallery li a.thumb {
    	width: 204px; /*--Width of image--*/
    	height: 182px; /*--Height of image--*/
    	padding: 5px;
    	border-bottom: 1px solid #ccc;
    	cursor: pointer;
    }
    ul.gallery li span { /*--Used to crop image--*/
    	width: 204px;
    	height: 182px;
    	overflow: hidden;
    	display: block;
    }
    ul.gallery li a.thumb:hover {
    	background: #333; /*--Hover effect for browser with js turned off--*/
    }
    ul.gallery 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--*/
    }
    ul.gallery li a {text-decoration: none; color: #777; display: block;}
    Now comes the most important part, JQuery. That is, the animation.
    Code:
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    
    	$("ul.gallery 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
    thumbOver='g'+thumbOver;
    		//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();
    	});
    
    });
    </script>
    
    If you read all the comments properly, you will know whats happening! Now go and show off your newly acquired skills! :)
     
  2. johngate2100

    johngate2100 New Member

    Joined:
    Aug 11, 2010
    Messages:
    9
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    http://www.printingblue.com/
    This is very nice.I tried this literally and this work good.And i will suggest people to copy this because this is correct.
     
  3. prestashopic

    prestashopic New Member

    Joined:
    Sep 25, 2010
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    E-commerce Web Developer and Desinger
    Location:
    Turkey
    Home Page:
    http://www.prestashopic.com
    Thanks for you good sharing. It really help me.
     
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  5. kurisu21

    kurisu21 New Member

    Joined:
    Dec 10, 2010
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    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.

    :nonod: What a shame, even asking for the members to vote for this article.
     
  6. raju_mars

    raju_mars New Member

    Joined:
    Apr 11, 2010
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    http://www.newskeybd.com
    Thanks Boss U write Nice Script..
     
  7. adyz

    adyz New Member

    Joined:
    Jan 29, 2012
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Can we do the revers? From gray to color image?
     
  8. devnty06

    devnty06 New Member

    Joined:
    Feb 4, 2010
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    chennai
    Hey thanks for sharing the tips.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice