Allow specific tag to override overflow:hidden

I've got a <div>, that's a certain height and width, and overflow:hidden so that specfic inner images are clipped; however I want one image in the <div> to pop out of the border (ie to override the overflow:hidden), how do I do this?

The trick is to keep the overflow:hidden element with position:static and position the overflowing element relative to a higher parent (rather than the overflow:hidden parent). Like so:

.relative-wrap {
    /*relative on second parent*/
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
    
    /*no relative on immediate parent*/
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}

<div class="relative-wrap">
    
    <div class="overflow-wrap">
        
        <div class="respect-overflow">
        
        </div>
        <div class="no-overflow">
            
        </div>
        
    </div>
    
</div>

I also want to note, a very common use case for the desire to have an element overflow its container in this way is when you want animate the height of a dropdown or container from X to 0, and therefore need to have overflow: hidden on the container. Usually you have something inside the container that you want to overflow regardless. Since these elements are only accessibly when the container is "open", you can take advantage and set the overflow back to visible after the container is fully open, and then set it back to hidden before trying to animate the container back to height: 0.

I know this is an old post, but this can be done (at least in Chrome). I figured this out about two years ago and it's saved me a couple times.

Set the child to have position of fixed and use margins instead of top and left to position it.

#wrapper {
    width: 5px;
    height: 5px;
    border: 1px solid #000;
    overflow: hidden;
}

#parent {
    position: relative;
}

button {
    position: fixed;
    margin: 10px 0px 0px 30px;
}

Here is an example: http://jsfiddle.net/senica/Cupmb/

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:

<div class="panel">
    <div class="outer">
        <div class="inner" style="background-color: red;">
            <div>
                title
            </div>
            
            <div>                     
                some content
            </div>
        </div>    
    </div>  
</div>

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

.outer:hover {
    overflow: visible;
}  

.inner:hover {
    position: absolute;
}

Here is a fiddle:

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

Wrap your overflow: hidden div with another div that has a css property of -

transform: translate(0, 0);

and in your specefic tag that you want it to override the - overflow: hidden , set it with -

position: fixed; it will continue to be position relatively to its parent

i.e -

.section {
    ...
    transform: translate(0, 0);
}

.not-hidden {
    position: fixed;
	...
}

See the fiddle here

You cannot, unless you change your HTML layout and move that image out of the parent div. A little more context would help you find an acceptable solution.

You can overflow an element out of the div by wrapping it in another div, then set your image as position:absolute; and offset it using margins.

<div class="no-overflow">
<div>
<img class="escape" src="wherever.jpg" />
</div>
</div>

.no-overflow{
overflow:hidden;
width: 500px
height: 100px
}

.escape{
position: absolute;
margin-bottom: -150px;
}

Example (tested in firefox + IE10) http://jsfiddle.net/Ps76J/

All the above is nice but nothing beats JAVASCRIPT. (Using jquery). So,

<script>
var element = $('#myID');
var pos = element.offset();
var height = element.height(); // optional
element.appendTo($('body')); // optional
element.css({
    position : 'fixed'
}).offset(pos).height(height);
</script>

What I do is, get the original position of the element (relative to the page), optionally get the height or width, optionally append the element to the body, apply the new css rule position : fixed and finally apply the original position and optionally width and height.

There is currently no way I am aware of to make a parent node with overflow hidden have children visible outside it (with the exception of position:fixed children).

HOWEVER, it is possible to instead of using overflow, you can just use the outline property set to the color of the background combined with the z-index property to mask some elements while retaining others like so.

.persuado-overflow-hidden {
 /*gives the appearance of overflow:hidden*/
  z-index: -100;
  position: relative;
  outline: 1000vw solid white;
  overflow: visible;
}
.overridevisible {
/*takes the element out of the persuado overflow hidden*/
  z-index: 1;
}
/*does the other styling to the text*/
.loremcontainer {
  width: 60vw;
  height: 60vh;
  margin: 20vw;
  border: 1px solid;
}
.loremtxt {
  width: 100vw;
  height: 100vh;
  margin: -20vh;
  z-index: -1;
}
.positionmessage {
  z-index: 100;
  position: absolute;
  top: -12vh;
  left: -5vw;
  right: -5vw;
  color: red;
}

<div class="persuado-overflow-hidden loremcontainer">
<div class="loremtxt">
<div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec.
</div>
</div>

You can do that by wrapping the 'overflow:hidden' div in another div. Example:

<div class="outer">
  <div class="inner">
    <img src="img1" alt="">
  </div> 
  <img src="img2" alt="">
</div>

.outer, .inner{
   position:relative;
}

.inner{
  overflow:hidden;
}

img{
  position:absolute;
}

In the above example all the elements inside the div with class of 'inner' will be affected by 'overflow:hidden'. Where as the images placed outside the inner div will be free to move out of boundaries.

This way we can make certain images pop out of the inner div.

overflow refers to the container not allowing oversized content to be displayed (when set to hidden). It's got nothing to do with inner elements that can have overflow:whatever, and still wont' be displayed.

Just give position:absolute to the image that need to be out of the div tag. The image is positioned relative to the document(or body).

Below is the code to prove the same

div {
  height: 500px;
  width: 500px;
  overflow: hidden;
  border: 1px solid black;
}

img:nth-child(1) {
  height: 200px;
  position: absolute;
  margin-left: 300px;
}

img:nth-child(2) {
  height: 400px;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>

Z-index doesnt seem to work, but here I have a workaround which worked fine for me, as I needed overflow only to be "visible" when hovering a child element:

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}

I've got a super-easy solution to this problem: Use the "pre" tag. I know the pre tag is the equivalent of using "goto" in programming, but hey: it works!

<div style="overflow: hidden; width: 200px;">
  <pre style="overflow: auto;">
    super long text which just goes on and on and on and on and one, etc.
  </pre>
</div>