Fading Image Switch Jquery

I thought I would go really simple but effective in this jquery tutorial. Switching images using CSS is pretty simple by changing the background position, but that’s a straight switch, which is fine for most things but I wanted a smoother method which would fade the image from black and white to colour. This is not the most challenging of tasks but it’s worth doing, it is so easy to implement to multiple images.

Click here to view the demo

Right first thing is to make 2 images of the same size, one in colour and the other being black and white. Of course you don’t have to use black and white image, I am just using that as it clearly shows the fade transition. The image I am going to use was taken in Toronto on a tour of the Rogers Centre which is the home of the Toronto Blue jays MLB team.

Make sure you attach your jquery or none of this will work.

The Jquery

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

The HTML

1
2

<img src="colour.jpg" class="overlay_img"/>
<img src="bw.jpg" class="bw_img"/>

Nice and clear as always, real simple, just two images , add the class ‘overlay_img’ to the top image and ‘bw_img’ to the bottom. I thought these class names would make it easier to follow rather than image 1 and image 2.

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.overlay_img {
	position:absolute;/*this is really the only style you need*/	
	padding:10px;
	background-color:#333;
	border:1px solid #000;
	-webkit-box-shadow: 0px 0px 10px #FC0;  
	-moz-box-shadow: 0px 0px 10px #FC0;
}
.bw_img {
	padding:10px;
	background-color:#333;
	border:1px solid #000;
	-webkit-box-shadow: 0px 0px 5px #F60;
	-moz-box-shadow: 0px 0px 5px #F60;
}

As I have noted in the CSS you only really need absolute positioning on ‘overlay_img’ to make this effect work, I added in the rest to finish it off.

The Jquery

1
2
3
4
5
6
7
8
9

$(document).ready(function(){
	$('.overlay_img').fadeTo('fast', 0); //hides the image from view
	$('.overlay_img').hover(function(){ //when hovered...
		$(this).stop().fadeTo('normal', 1.0); //fade the overlay_img to 100% in normal speed
		}, 
		function(){   
		$(this).stop().fadeTo("normal", 0); //when not hovered fade back to 0% in normal speed
	});
});

This is all the jquery you need to produce this effect. If you have followed my blog posts on jquery you should understand most of this by now. Not really much of a write up in this one, all nice and straight forward.

Hey, my name’s Kevin, I love hockey and the internet. I like my rock music and its great to just plug in and get the designs flowing. I love chicken wings, the more hot sauce on them the better and I have 3 kidneys...You can find me on multiple social networking sites, so come say hi. I hope at least one post on here is useful to you!

• Delicious
• Design Float
• Digg
• stumble
• twitter
• Reddit