jQuery Color Fade Hover Effect

jQuery Color Fade Hover Effect

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.

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

17 comments
Stacy Summers says

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

Reply
Renee says

The download link is empty!

Reply
Richard Carpenter says

Thanks for the heads up. Link now fixed

Reply
whynotme says

hello!

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

Reply
virtualDeziner says

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

Reply
Thomas Flock says

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;
}

Reply
Kulvinder Singh says

Thanks

Reply
rahulkumar says

hi thanks our web sait

Reply
Carlos says

Thanks! It worked!

Reply
Natashia says

Is there anyway to get this to work on IE?

Reply
Richard Carpenter says

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

what version of IE are you using?

Reply
Jolomi says

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.

Reply
Shreyo says

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

Reply
venugopalreddy says

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

Reply
chanhope says

amazing tutorial, thanks

download link not working

Reply
Richard Carpenter says

Download link now fixed, cheers

Reply
hardik hirpara says

Thank you

Reply
Add Your Reply

Popular posts

css.php