Override parent CSS Rule of 'overflow:hidden'
Question by Starx
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.
Answer by Starx
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.
