February 26, 2012

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.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!