Allow specific tag to override overflow:hidden

Question

I\'ve got a

, that\'s a certain height and width, and overflow:hidden so that specfic inner images are clipped

Answer 1

All given answers where not satisfying for me. They are all hackish in my opinion and difficult to implement in complex layouts.

So here is a simple solution:

Once a parent has a certain overflow, there is no way to let its children override this.

If a child needs to override the parent overflow, then a child can have a different overflow than the other children.

So define the overflow on each child instead of declaring it on the parent:

    

        

            

                title
            

            
                     
                some content
            
        
    
    
  


.outer {
    position: relative;
    overflow: hidden;
}    

.outer:hover {
    overflow: visible;
}  

.inner:hover {
    position: absolute;
}

Here is a fiddle:

http://jsfiddle.net/ryojeg1b/1/