$(document).ready(function(){

	//get the width
	var oWidth = $('.grow').width();
	//get the height
	var oHeight = $('.grow').height();
	//we want to preserve the proportions of the div, so we get the multipler (you could always multipy the multiplier to get a large div																			 																		 
	var mpx = ((oWidth / oHeight)*1.2);
	
	//run a function when the div is hovered over
	$('div.grow')
		//mouseOver effect
		.hover(function(){
			//take the currently targeted img
			$(this)
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				//custom animation effect to change the width and height of the div
				.animate({
					//take the original width/height X multipler and tag on the 'px'
					width: (oWidth * mpx)-(((oHeight * mpx)-oHeight)/2) +'px',
					height: (oHeight * mpx)-(((oHeight * mpx)-oHeight)/2) +'px',
					marginTop: -(((oHeight * mpx)-oHeight)/2) +'px',
					marginLeft: -(((oHeight * mpx)-oHeight)/2) +'px',
					paddingTop: (((oHeight * mpx)-oHeight)/2) +'px',
					paddingLeft: (((oHeight * mpx)-oHeight)/2) +'px'
				//space the animation out over 1 sec (deals in milliseconds)
				},100);
		},
		//this is just like a mouseOut effect to take the div back to the original size
		function(){
			$(this)
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				.animate({
					width: oWidth +'px',
					height: oHeight +'px',
					marginTop: 0 +'px',
					marginLeft: 0 +'px',
					paddingTop: 0 +'px',
					paddingLeft: 0 +'px'
				},100);
		});


//run a function when the div is hovered over
	$('img.grow')
		//mouseOver effect
		.hover(function(){
			//take the currently targeted img
			$(this)
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				//custom animation effect to change the width and height of the div
				.animate({
					//take the original width/height X multipler and tag on the 'px'
					width: (oWidth * mpx) +'px',
					height: (oHeight * mpx) +'px',
					marginTop: -(((oHeight * mpx)-oHeight)/2) +'px',
					marginLeft: -(((oHeight * mpx)-oHeight)/2) +'px'
				//space the animation out over 1 sec (deals in milliseconds)
				},100);
		},
		//this is just like a mouseOut effect to take the div back to the original size
		function(){
			$(this)
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				.animate({
					width: oWidth +'px',
					height: oHeight +'px',
					marginTop: 0 +'px',
					marginLeft: 0 +'px'
				},100);
		});

});