This blog has moved here: www.bloggermint.com
Rethnaraj Rambabu Tuesday, July 6, 2010

Today, I am going to make a black and white image fade into a colour image or vice versa on mouseover with jQuery. So, follow the steps below to use the effect in your blog. In this tutorial, I'm going to use two images, a colour image and its greyscale mode image.


View the demo

You can create greyscale mode image of the original image using any image editing softwares. Or you can use free online image editors such as Online-Image-Editor, Fotoflexer, Pixlr, Picnik and more.

1. Styling – CSS

First log into Blogger > Design > Edit HTML. Search for the code ]]></b:skin> . And replace it with the codes below.

span.fadehover {
position: relative;
}

img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.b {
position: absolute;
left: 0;
top: 0;
}

]]></b:skin>

2. jQuery & Function

Now add the following jQuery script and function immediately before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
//]]>
</script>

3. Wireframe – HTML

And here is the HTML code that you should place in your Blog posts. But, remember to add it in EDIT HTML mode and not in Compose mode in text editor.

<span class="fadehover">
<img src="URL_of_normal_image" alt="" class="a" />
<img src="URL_of_greyscale_image" alt="" class="b" />
</span>

View the demo

UPDATE : You can decide whether you want the effect is from GREYSCALE to COLOUR or COLOUR to GREYSCALE by changing the image source in the HTML code above. The image with class='a' appears first and changes to image with class='b' on hover.


37 comments:

Earl said...

Thanks man! This is great!

Rethnaraj Rambabu said...

@Earl, welcome friend..

New Free Blogger Template Everyday said...

Work with IE too??

Rethnaraj Rambabu said...

Yep,it works fine in IE also.

Anonymous said...

eonsofttech.com

web design company in uk

PATRYK STRZEŚNIEWSKI said...

Hey, can you write a code to add a lightbox too? To this image. Is it possible?
Im tryin:)
Thanks in advance:]

ေက်ာက္ေခတ္ said...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "type".

!!!ERROR!!!

Joshua Smith said...

Thank you for this detailed helpful review about sweet girls.

Time is going ahead and it shows that serious programs should pass test planning. The best direction for software development is connected with augmented reality development that allows to develop outsource applications for mobile phones.

imroee said...

I will try this one. thankz

--faceleakz

Mies said...

Hi! Great effect, but I can't find where to put the last code.. please help!

Sports Administration Courses said...

I was doing some other research where I found your Demo. Very Nice. Gives me something to look forward to in the future.

Joshua Smith said...

Thanks for great info. Let me mention about home insurance rates provided by house protection companies. Compare free rates on homeowners insurance.

Joshua Smith said...

Thanks for sharing with us this great posts. You have nice possibility to choose online affiliate programs. The best casino affiliate programs such as 32 Red affiliates and great poker rooms such as redbet.

Emerson Lima said...
This comment has been removed by the author.
CrEAtiVE DeSiGneR said...
This comment has been removed by the author.
Pradeep Kasta said...

awesome man ive been lookin 4 this:]

damian said...

I've been looking for this effect in html5 without using 2 images. Since all the html versions lack of browser-support (chrome) or any other compabilities, I'm going to use this oldschool method! Thank you, this script looks really smooth and impressive!

timereplicas said...

Replicas de Relogios
Replicas Rolex
Replicas Tag Heuer
Replicas Tissot
Replicas Omega

cheap football jerseys said...

I am very lucky to get this tips from you.I really like your points and think you put a new spin on this for readers. I respect your writing style. You’re so perceptive.

jerseys cheap said...

I was doing some other research where I found your Demo. Very Nice. Gives me something to look forward to in the future.

Seacanoeist Mark said...

I liked your article, I will share your article to everyone!!




WoW gold|Diablo 3 Gold|RS Gold|Cheap Diablo 3 Gold

diablo said...

I liked your article, I will share your article to everyone!!
runescape 2007 gold ;|
buy diablo 3 gold;|buy diablo III gold

china tours said...

I was doing some other research where I found your Demo.You can learn more: China vacation packages | China tour operator

GuildWars2Items said...

Henceforth will I recognize that each day I am tested by life Sell RS Gold in like manner. If I persist, if I continue to try, if I continue to charge forward, I will succeed Sell RS Gold, Your future depends on your dreams. So go to sleep.Do not keep anything for a special occasion, because every day that you live is a SPECIAL OCCASION Sell Runescape Gold, he time of life is short ; to spend that shortness basely, it would be too long.

Would you write to please D3 Gold just yourself? Or others? Or yourself by writing for others Cheap D3 Gold? It takes strength to do what must be done when the work is unpleasant and uncomfortable D3 Gold Sale, And of what would you write: Of love? Hate? Fun? Misery? Life? Death?Nothing Everything?

Anonymous said...

Therefore, players need to cost WOW gold to learn others from it. In close range, you can use kicking, Master Flash, if it is out of the place then could not kicked, so even if you do not remember and also because there is no interruption while pressing SHIFT again buy rs gold

GuildWars2Items said...

The ordinary bat that flies around at night, who is a remarkable nim in the air, cannot take off from a level place aion gold, if it is placed on the floor or flat ground, all it can do is to shuffle about helplessly and aion gold, no doubt, painfully, until it reaches some slight elevation from which it can throw itself into the air. Then, at once, it takes off like a flash aion gold.

GuildWars2Items said...

Your future depends on your dreams. So go to sleep Diablo 3 Gold, he time of life is short ; to spend that shortness basely, it would be too long C9 Gold, It's great to be great, but it's greater to be human C9 Gold Sale. People who are serious about the relation are moody as they have devoted a lot that makes them worry about gains and losses.

Anonymous said...

This code is great! But how do I make it work with multiple images. Let's say I have a 8 images and I would like the effect to work on each one. Now they get overlapped.

Fahad Naseer said...

Which Car you want..? Here is a best list of Cars and Vehicles, Hot Vehicles, Strange Cars, Super Cars Model, Funny Cars, Car Latest Models, Cars with Girls, Cars like helicopter and Most Speed and Expensive Cars
WorldLatestVehicles.com

saeed ahmed thanvi said...

World's Most Popular Cars, Hot Speed Cars, Hot Cars with Hot Girls, Cars Latest Pictures with all info, Latest updates Cars Models and Company Cars, Strange Vehicles, Concept Cars, Top 10 Expensive Cars in the World.
Visit this Link for More Strange Vehicles and Cars with Latest info and Pictures
WorldLatestVehicles.com

Buckley Carlucci said...

One Xbox: Microsoft announces them countries that will have to su runescape gold Xbox Live Launch. La nueva Xbox One on Xbox Live will offer them in all countries when it su Launch with the relevant inability to enjoy juegos as they need regular checking the Internet to function. You expect that the Xbox One be available in these countries stem it next year.The the list that will be released Microsoft Encuentro them the majority of major markets like the U.S cheap rs 3 gold.

Supplements in Australia said...

I am quite sure they will learn lots of new stuff here than anybody else. Thanks for sharing this informationSupplements in Australia

Houlteninstitute.com said...

Earth's Most widely used Cars, Hot Rate Cars, Hot Cars with Hot Girls, Cars Newest Images with all facts, Newest updates Cars Designs and Firm Cars, Houlteninstitute.com Weird Automobiles, Strategy Cars, Top 10 Expensive Cars on the globe.

Irsah inDesigns said...

Very nice and simple. I was finding some extras for my blogger designs at BlogrCart Plus Blogger template with shopping cart and this should be an easy fix. Thanks for the useful codes and shares.

Hakkem Ismail said...

very nice blog ma mosquito net dealer in coimbatore

China tours said...

I was doing some other research where I found your Demo.You can learn more: China Trip and Beijing Trip

Adeline Niesha said...

Thats a good' article, i usually amazed with' this thing, i asked myself about this opinion, I wish You'll a better articles that can make another people impressive.. don't make the article feel rigit and isn't interesting and poor, i like to read this' article and i think this is "good".thank you' m'y brother.

Post a Comment

Copyright 2010 Introblogger
Designed by Rethnaraj Rambabu
Introblogger | The free blogging guide - Blogged Web Statistics