(function($){
	$.fn.cross = function (options) {
        return this.each(function (i) { 
			var $$ = $(this);
			var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
			var width = $$.css("width");
			var height = $$.css("height");
			$$.wrap('<div style=\"background: url(' + target + ')\; width: ' + width + '; height: ' + height + '; margin:0px; padding:0px;"></div>');
			
			// 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);

$(window).bind('load', function () {
    $('img.fade').cross();
});