Image mouseover fade/greyscale effect with jQuery in Blogger

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.

5 Replies to “Image mouseover fade/greyscale effect with jQuery in Blogger”

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.