// http://selfconclusion.co.uk/2009/08/image-hover-effect-using-jquery-tutorial/

$(document).ready(function(){
	$(".handle-column img").hover(
		function(){
			$(this).fadeTo(400, .7); // This should set the opacity to 80% on hover
		},
		function(){
			$(this).stop().fadeTo(400, 1.0); // This should set the opacity back to 100% on mouseout
		}
	);
});

$(document).ready(function(){					   
    $("#rollover-1").css({'opacity':'0'}); //Set opacity on each span to 0%
	$("#image-1").css({'opacity':'100'}); //Set opacity on each span to 100%	
	$('#feature-1').hover(
		function(){
			$(this).find('#rollover-1').stop().fadeTo(400, 1);
		},
		function(){
			$(this).find('#rollover-1').stop().fadeTo(400, 0);
		}
	)

    $("#rollover-2").css({'opacity':'0'}); //Set opacity on each span to 0%
	$("#image-2").css({'opacity':'100'}); //Set opacity on each span to 100%	
	$('#feature-2').hover(
		function(){
			$(this).find('#rollover-2').stop().fadeTo(400, 1);
		},
		function(){
			$(this).find('#rollover-2').stop().fadeTo(400, 0);
		}
	)

    $("#rollover-3").css({'opacity':'0'}); //Set opacity on each span to 0%
	$("#image-3").css({'opacity':'100'}); //Set opacity on each span to 100%	
	$('#feature-3').hover(
		function(){
			$(this).find('#rollover-3').stop().fadeTo(400, 1);
		},
		function(){
			$(this).find('#rollover-3').stop().fadeTo(400, 0);
		}
	)
	
    $("#rollover-4").css({'opacity':'0'}); //Set opacity on each span to 0%
	$("#image-4").css({'opacity':'100'}); //Set opacity on each span to 100%	
	$('#feature-4').hover(
		function(){
			$(this).find('#rollover-4').stop().fadeTo(400, 1);
		},
		function(){
			$(this).find('#rollover-4').stop().fadeTo(400, 0);
		}
	)
	
});