Go4Expert - Greyscale Hover Effect using CSS and JQuery

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

        <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! :)