I am display thumbnails on a div with overflow:hidden as its style attribute.
When I click one thumbnail, I replace the image with its larger view (which creates a zoom effect) but since some of the images are quite big, it gets cut off by its parent division.
So, I want that particular thumbnail to defy its parent rule and get out and show its 100%self.
The main reason for me, to bump this question, is to get/provide a good working solution. The best one is found is this.
The easiest and more efficient method to do this, was to add the following property to the image to get the job done.
position: absolute
After it has absolute positioning, its jumps out of its container till it finds another relative container, thus defying its parent rule.
I am created a simple demo [here] to illustrate this situation and the solution.
I assume you've tried modifying the element css via jquery on click?
$(this).css('overflow', 'visible');
Just use jquery to revert the css modification when you clear the magnified image.
If that doesn't work for you for some reason or another, you could create a hidden div for magnified images. Use jquery to create a click event that changes the source and displays the div that contains different css attributes. Again, hide that div with the clearing click event.
ideally, the div should have no width and height declared (meaning: let the content decide it's dimensions)
$('div_selector_here').on('click',function(){
//try one of the following:
//they both stretch the div to the image IF it has no width and height declared:
// if width and height are declared for the div, this will leak the image out of the container
$(this).css('overflow','visible');
//if width and height are declared for the div, this will add scrollbars
$(this).css('overflow','auto');
});
additionally, you can add this to make sure the image is snug in the div (and again, it's idea you don't set width and height to the div):
img{
display:block;
width:100%;
}
