Click here to Skip to main content
15,942,580 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
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;

}	

HTML
<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>

JavaScript
$(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;
	});
});
Posted
Updated 30-Sep-14 1:48am
v2
Comments
Shemeemsha (ഷെമീംഷ) 1-Oct-14 10:28am    
Nice page design
But the hover image is working fine..
Then what is the problem?
[no name] 7-Oct-14 6:43am    
.Enlarge span {
position:relative;
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;
}

Make it to relative and try

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900