Переполнение дочернего элемента за пределы родительского элемента

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 = "" 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>

.menu-card {
  font-family: sans-serif;
  color: red;
  margin:40px auto;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius:0 0 5px 5px;
  max-width: 400px;
}
.menu-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.menu-card__header {
  background-color: orange;
  max-height: 300px;
  border-radius: 5px 5px 0 0;
  text-align: center;
}
.menu-card__header-image {
  transition: transform 0.5s ease-in-out;
}
.menu-card:hover .menu-card__header-image {
  transform:translateY(-80px);
}
.menu-card__title {
  margin:0;
  padding:15px;
  padding-top:40px; /* space for the triangle shape */
  margin-top:-40px; /* to create the overlap with the top section (same as padding)*/
  background:
    /* top background will take 40px and draw a triangular shape*/
    linear-gradient(to bottom right,transparent 49%,#fff 50%)top/100% 40px,
    /* bottom background will take the remaining space as a rectangular shape*/
    linear-gradient(#fff,#fff) bottom/100% calc(100% - 40px);
  background-repeat:no-repeat;
  position:relative;
  text-align: center;
}
.menu-card__description {
  margin:0;
  padding: 0 12px 20px;
  background:#fff;
  position:relative;
}

<div class = "menu-card">
  <div class = "menu-card__header">
    <img src = "https://picsum.photos/id/0/250/635" alt = "" 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>