Display Large Image on mouse hover with auto position

See more:

CSS

HTML

jQuery

I have problem to displaying image zoom effect on hover.The problem is that when i mouse hover my image show out of website boundary because its large image.How i can show image on mouse hover with auto positioning.It should be inside the website boundary.I have image here to better understand.here is my image
CSS

.Enlarge {
position:relative;
height:150px;
width:250px;
}    
.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
   
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}    
div.Enlarge:hover span{
 visibility: visible;
 opacity: 1;
top: 50px;
left: 0px;
width:500px;
height:300px;
padding: 5px;
background:#9f499b;

}	

<section class="item brochure">
<div class="Enlarge">
    <img src="images/portfoli/small.jpg" />
    <span><img src="images/portfoli/large.jpg" /></span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    <img  src="images/portfoli/small2.jpg" />
    <span><img src="images/portfoli/large2.jpg" /></span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    <img  src="images/portfoli/small3.jpg"/>
    <span><img  src="images/portfoli/large3.jpg"/></span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    <img src="images/portfoli/small4.jpg"/>
    <span><img  src="images/portfoli/large4.jpg" /></span>
</div>
</section>

$(document).ready(function() {
	$('#portfolio li').click(function() {
		// fetch the class of the clicked item
		var ourClass = $(this).attr('class');
		
		// reset the active class on all the buttons
		$('#filterOptions li').removeClass('active');
		// update the active state on our clicked button
		$(this).parent().addClass('active');
		
		if(ourClass == 'all') {
			// show all our items
			$('#portfolio').children('section.item').show(1000);	
		}
		else {
			// hide all elements that don't share ourClass
			$('#portfolio').children('section:not(.' + ourClass + ')').hide(1000);
			// show all elements that do share ourClass
			$('#portfolio').children('section.' + ourClass).show(1000);
		}
		return false;
	});
});