(function($){
	$.fn.cross = function (options) {
        return this.each(function (i) { 
			var $$ = $(this);
			var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
			var backpos = $$.css('backgroundPosition');
			
			var width = $$.css("width");
			var height = $$.css("height");
			$$.wrap('<span style="background: url(' + target + ')' + backpos + '; width: ' + width + '; height: ' + height + '; margin:0px; padding:0px;display:block;"></span>');
			
			// similar effect as single image technique, except using .animate 
            // which will handle the fading up from the right opacity for us
            $$.hover(function () {
                $$.stop().animate({
                    opacity: 0
                }, 175);
            }, function () {
                $$.stop().animate({
                    opacity: 1
                }, 175);
            });
			
        });
    };
    
})(jQuery);

jQuery(document).ready(function(){
	images = jQuery('img.fade');
    if(images != null) images.cross();
});