jQuery Color Fade Hover Effect

A while ago i was asked by someone “How do i make a transition hover effect from greyscale to color?“. In this tutorial i’ll show you how it can be done using two separate images combined with jQuery.

In Blog, jQuery

About The Effect

The effect is pretty simple, its basically two images on top of each other positioned using CSS. When a user places there mouse over the image jQuery fades the top image out revealing the colored image underneath. The same effect can be pulled off with HTML5 but i believe there is a lot more coding involved, its a subject i may touch on in the future.

Greyscale To Color Transition

Getting Started…

Create a new HTML file with the latest jQuery libary and a stylesheet attached..

1
2
3
Greyscale To Color jQuery Transition

<script src="http://code.jquery.com/jquery-latest.js"></script><img src="file:///C|/Users/gaffer/Desktop/greyscale_color_transition/01.gif" alt="" width="580" height="600" />

Inside the body of the HTML document create a simple un-ordered list. Inside each list insert two images of the same size, one should be in color and the other in greyscale. If you want the effect to be “greyscale to color” then place the grey image in the list first, if you want the effect to be “color to greysale” then place the images the other way round.

Give each colored image a class of “color” and each grey image a class of “grey”. The code should look like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="gallery">
<ul class="gallery">
    <li><img class="grey" src="images/01_grey.gif" alt="" /> <img class="color" src="images/01_color.gif" alt="" /></li>
</ul>
</ul>

&nbsp;

<ul>
    <li><img class="grey" src="images/02_grey.gif" alt="" /> <img class="color" src="images/02_color.gif" alt="" /></li>
</ul>

&nbsp;

&nbsp;

The CSS Styles

Inside the stylesheet add the following CSS styles.

1
.gallery li { float: left; margin-right: 20px; list-style-type: none; margin-bottom: 20px; display: block; height: 130px; width: 130px; position: relative; } img.grey { position: absolute; left: 0; top: 0; z-index: 10; } img.color { position: absolute; left: 0; top: 0; }

The styles for the list (.gallery li) are just positioning each list in a row, the most important style is the “Position: Relative” style without this style the gallery images will just be on top of each other.

The most important set of styles are the classes that are assigned to the images.

 

The jQuery

Create a blank .js file then copy and paste the code below.

1
$(document).ready(function(){ $("img.grey").hover( function() { $(this).stop().animate({"opacity": "0"}, "slow"); }, function() { $(this).stop().animate({"opacity": "1"}, "slow"); }); });

Save the .js file as “Transition” inside a folder called “JS”. Once saved link the JS file in the head of the HTML file.

1
<script src="js/transition.js"></script>

The jQuery code basically says, once you hover over an image with a class of grey lower the opacity to 0%, revealing the image underneath.

1
2
3
4
5
$(document).ready(function(){
$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},

The next part brings the opacity back to 100% when the mouse is moved off the image.

1
2
3
4
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

Conclusion

Thanks for taking part in this tutorial, if you have any comments or questions then feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

  1. May 21, 2012 at 9:51 AM

    hi! Thank you for useful tips! I was looking for such tutorial :)

  2. Renee
    June 17, 2012 at 3:37 AM

    The download link is empty!

  3. Wilma Hamlin
    June 17, 2012 at 8:06 AM

    Thanks for the heads up. Link now fixed

  4. June 27, 2012 at 9:02 AM

    hello!

    is the ‘blackout’ in between inevitable? seems a bit bumby :/ at least on my browser its: grayscaleimage – fade to black – black – colorimage!

  5. July 5, 2012 at 7:21 AM

    Hi, Thank you very much for sharing, I was looking for something like that for long, but I have one more requirement I want to have a link on each image I mean on mouse over it should be linked to another page, is it possible?

    Best Regards
    VD

  6. July 31, 2012 at 1:51 AM

    The pure CSS would be more simple, you can change opacity with new HTML5, the code would look something like this, first you would create a tag for each picture, the color and black and white. Then position them on top of one another , then just change to opacity of the black and white one to zero on the hover command, like so..

    .blackandwhitepicture:hover {
    position:blah;
    height and width stuff;
    opacity: 0.0;
    }

  7. Kulvinder Singh
    August 7, 2012 at 8:16 AM

    Thanks

  8. rahulkumar
    August 18, 2012 at 9:44 AM

    hi thanks our web sait

  9. September 15, 2012 at 2:00 AM

    Thanks! It worked!

  10. Natashia
    September 18, 2012 at 3:48 PM

    Is there anyway to get this to work on IE?

  11. Wilma Hamlin
    September 18, 2012 at 5:11 PM

    Ive tested it in IE9 and compatibility mode and works fine.

    what version of IE are you using?

  12. September 26, 2012 at 5:18 AM

    Another method for reducing the number of http requests is to use css sprites for the images. In my case, I used one image for both the grey and color images and used a line of css code to display them accordingly. Just my 2 cents.

    Cheers.

  13. September 26, 2012 at 10:20 AM

    works perfect in all major browsers.
    Tested: IE 8/9, Chrome, Safari, Opera and Firefox.

  14. October 15, 2012 at 5:25 AM

    thanks for helping with this type of tutorials and plz can u post nav menus tutorial with jquary.

  15. October 23, 2012 at 12:31 PM

    amazing tutorial, thanks

    download link not working

  16. Wilma Hamlin
    October 23, 2012 at 7:39 PM

    Download link now fixed, cheers

  17. hardik hirpara
    November 7, 2012 at 5:46 AM

    Thank you

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 17 Comments On jQuery Color Fade Hover Effect, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php