Question

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 1

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.