I have this CSS

.text {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: auto;
  background-color: transparent;
}
.label {
  width: 100%;
  z-index: 1
}
.desc {
  width: 100%;
  position: relative;
}

.hideDesc {
  animation: descHide 1s forwards;
}
@keyframes descHide {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

for this HTML

  <div class="text">
    <div class="label">
      <p>A Label</p>
    </div>
    <div class="desc">
      <p>Lots of text here...</p>
    </div>
  </div>

Then I’m triggering the CSS animation when you click on .label using some code. The animation raises .desc up, behind .label, as it fades it out.

The issue that I’m having is that you can see the top of .desc above .label as it moves up. How can I animate it so it looks like it’s sliding up but into .label ie without any part appearing above .label?