Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Greyscale Hover Effect using CSS and JQuery (http://www.go4expert.com/articles/greyscale-hover-effect-using-css-jquery-t23251/)

blitzcoder 8Sep2010 18:04

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

johngate2100 24Sep2010 02:40

Re: Greyscale Hover Effect using CSS and JQuery
 
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 25Sep2010 13:30

Re: Greyscale Hover Effect using CSS and JQuery
 
Thanks for you good sharing. It really help me.

shabbir 4Oct2010 10:21

Re: Greyscale Hover Effect using CSS and JQuery
 
If you liked this article do nominate this article for Article of the month - Sep 2010 Before 15th of October 2010.

kurisu21 10Dec2010 09:44

Re: Greyscale Hover Effect using CSS and JQuery
 
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.

raju_mars 23Aug2011 19:32

Re: Greyscale Hover Effect using CSS and JQuery
 
Thanks Boss U write Nice Script..

adyz 29Jan2012 14:46

Re: Greyscale Hover Effect using CSS and JQuery
 
Can we do the revers? From gray to color image?

devnty06 28Feb2012 13:32

Re: Greyscale Hover Effect using CSS and JQuery
 
Hey thanks for sharing the tips.


All times are GMT +5.5. The time now is 14:42.