// For a link like <a href="one.jpg"><img src="oneThumbNail.jpg" /></a>
	$('a').hover(function(e) {
	
		// Mouse on
		
                // Get the linked large image from thumbnail anchor's href
		var href = $(this).attr('href'); 
		
                // Get the alternative text of the thumbnailed image
		var altText = $(this).children().attr('alt'); 
		
		// Create a containing div#horizon and inside of it create an image from the large version of the thumbnail
		// Hide the image to begin with, and append it to the body element
		$('<img id="largeImage" src="' + href + '" alt="large version of '+ altText +'" />')	
		.hide()
		.appendTo('body');
		
		
		// Get the width and height of the new image, and calculate the margin-top: and margin-left: values necessary to deadCentre the image
		var imgWidth = $('img#largeImage').attr('width');
		var imgHeight = $('img#largeImage').attr('height');
		var topVal = -(imgHeight/2);
		var leftVal = -(imgWidth/2);
		
		// Apply the necessary css to deadCentre the image
		$('img#largeImage').css({'margin-top': topVal, 'margin-left': leftVal});
		
		// Make the image visible
		$('img#largeImage').show()
		
	}, function() {
	
		// Mouse off 
		
		// Remove the image from the DOM
		$('img#largeImage').remove();
	});
	
	// Render the anchor unclickable
	$('a').click(function() {
		return false;
	});

// For a link like <a href="one.jpg"><img src="oneThumbNail.jpg" /></a>
	$('a').hover(function(e) {
	
		// Mouse on
		
                // Get the linked large image from thumbnail anchor's href
		var href = $(this).attr('href'); 
		
                // Get the alternative text of the thumbnailed image
		var altText = $(this).children().attr('alt'); 
		
		// Create a containing div#horizon and inside of it create an image from the large version of the thumbnail
		// Hide the image to begin with, and append it to the body element
		$('<img id="largeImage" src="' + href + '" alt="large version of '+ altText +'" />')	
		.hide()
		.appendTo('body');
		
		
		// Get the width and height of the new image, and calculate the margin-top: and margin-left: values necessary to deadCentre the image
		var imgWidth = $('img#largeImage').attr('width');
		var imgHeight = $('img#largeImage').attr('height');
		var topVal = -(imgHeight/2);
		var leftVal = -(imgWidth/2);
		
		// Apply the necessary css to deadCentre the image
		$('img#largeImage').css({'margin-top': topVal, 'margin-left': leftVal});
		
		// Make the div and the image visible
		$('img#largeImage').show()
		
	}, function() {
	
		// Mouse off 
		
		// Remove the div#horizon and the image within it from the DOM
		$('img#largeImage').remove();
	});
	
	// Render the anchor unclickable
	$('a').click(function() {
		return false;
	});

CSS needed here:   
    `    #largeImage
    {
    	    position: absolute;
    	    left: 50%;
            top: 50%;
            visibility: visible;
    }    `

Dead Centre modified from: [Dead Centre a Div](http://snipplr.com/view/231/dead-centre-a-div/ "Dead Centre a Div").

Hover over a thumbnail and open up a dead centered larger version

center

jQuery