JSFiddle - React, Tailwind, and code Playground

by djKliter

HTML

<div id="parent">
  <div>
    <div id="child"></div>
  </div>
</div>

<div id="next-div">
  <button>
  </button>
</div>

CSS

body {
  padding: 60px 140px;
}

#parent {
  width: 400px;
  height: 300px;
  background: rgba(0,0,0,0.8);
  margin: -40px;
  transform: translate(0,0); /* ЕСЛИ УДАЛИТЬ ЭТО ТО #child ВЫШЕ ВСЕХ, КАК И НУЖНО */
}

#parent > div {
  padding: 40px;
}

#child {
  position: relative;
  width: 200px;
  height: 180px;
  padding: 22px 0 20px 0;
  border-radius: 20px;
  font-weight: 400;
  background: red;
  z-index: 4;
}

#child:after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 88px;
    background: inherit;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: all .2s ease;
}

#child:hover:after {
    transform: translate(0,69px);
}

#next-div {
  position: relative;
  width: 300px;
  height: 100px;
  background: #000;
  padding-top: 20px;
  transform: translate(0,0);
  z-index: 2;
}

button {
  width: 200px;
  height: 50px;
  background: blue;
  cursor: pointer;
}