Make Child Visible Outside an Overflow:Hidden Parent

Make child visible outside an overflow:hidden parent

You can use the clearfix to do "layout preserving" the same way overflow: hidden does.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

add class="clearfix" class to the parent, and remove overflow: hidden;

Force child element visible outside an overflow:hidden parent

Unfortunately, you can't. The child element is only capable of changing within the parents region when the position is not set to fixed or absolute.

If you don't want to make the child fixed, you could try position:absolute; and set the parent to position: relative;

Like this...

.slide img {
  position: absolute;
  z-index: 2;
}
.slide {
  position: relative;
}

Or you could try to only hide the overflow on 1 direction. Like overflow-y:hidden; Or overflow-x: hidden;

Can I set the parent container as overflow: hidden but only specific child elements behave as if the parent is overflow: visible?

Possibly you can do this with position: absolute; 'on the children you want to overflow. Take a look at this example I made.

.contain {
  height: 100px;
  width: 100px;
  background-color: red;
  overflow: hidden;
}

.child1 {
  height: 30px;
  width: 30px;
  background-color: blue;
}

.child2 {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: absolute;
}

<div class="contain">
 <div class ="child1">one</div>
 <div class ="child2">two</div>
</div>

CSS how to have position absolute child visible outside of parent with overflow: hidden;

You can't do it if the overflow:hidden is in place. There is a better way to achieve the same effect without using overflow:hidden as it is just not needed to achieve this effect. Check this updated jsfiddle:

https://jsfiddle.net/o73ft5k2/1/

You can simply apply border-radius on particular elements. Also, notice `box-sizing: border-box" on an after element as padding had to be added for the text to align properly.

Overflowing a child element outside the parent element

One option without changing the markup is to animate the clip-path property as well to change to clip-path: polygon(0 -80px, 100% -80px, 100% calc(100% - 6vw), 0 100%) on hover - see demo below:

body {  margin-top: 100px; /* for illustration */}
.menu-card {  margin-left: auto;  margin-right: auto;  width: 80%;  /*overflow: hidden;*/  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  transition: 0.3s;  border-bottom-left-radius: 5px;  border-bottom-right-radius: 5px;  padding-bottom: 20px;  max-width: 400px;}.menu-card:hover {  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);  /*overflow: visible;*/}.menu-card:hover .menu-card__header { /* added */   clip-path: polygon(0 -80px, 100% -80px, 100% calc(100% - 6vw), 0 100%);}.menu-card__header {  background-color: orange;  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);  max-height: 300px;  border-top-left-radius: 5px;  border-top-right-radius: 5px;  /*overflow: hidden;*/  text-align: center;  transition: clip-path 0.5s ease-in-out; /* added */}.menu-card__header-image {  margin-left: auto;  margin-right: auto;  z-index: 33;  position: relative;  bottom: 0px;  transition: bottom 0.5s ease-in-out;}.menu-card:hover .menu-card__header-image {  bottom: 80px;}.menu-card__title {  padding: 0 12px;}.menu-card__description {  padding: 0 12px;}
.menu-card__title {  text-align: center;}

<div class="menu-card">  <div class="menu-card__header">    <img src="http://lorempixel.com/250/635" alt="Sample Image" class="menu-card__header-image" height="400px" />  </div>  <h2 class="menu-card__title">    Lorem Ipsum  </h2>  <p class="menu-card__description">    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, architecto. Repudiandae dolorum incidunt sint ex  </p></div>

Make Child Visible Outside an Overflow:Hidden Parent