Override CSS Overflow: Hidden Parent CSS Rule

Question

I show thumbnails on divoverflow: hidden as an attribute of the style.

When I click one thumbnail, I replace the image with a larger view (which creates a zoom effect), but since some images are quite large, it is disconnected from its parent division.

So, I want this particular thumbnail to not match its parent rule and go out and show it 100%self.

---

^{The main reason for me to solve this issue is to get / provide a good working solution. The best found this one .}

Answer 1

The easiest and most effective way to do this is to add the following image property to complete the task.

position: absolute

After it has absolute positioning, it jumps out of its container until it finds another relative container, thereby violating its parent rule.

I created a simple demo ^[here] to illustrate this situation and solution.

Answer 2

I assume you tried modifying the css element via jquery when clicked?

$(this).css('overflow', 'visible');

Just use jquery to undo the css modification when clearing an enlarged image.

- , div . jquery , div, css. div -.

Answer 3

Ideally, the div should have a width and height declared (value: let the content determine the 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'); 

});

Alternatively, you can add this to make sure the image is wrapped in a div (and again, this is the idea that you are not setting the width and height for the div):

img{
    display:block;
    width:100%;
}