CSS Transition: Cover Image From Bottom To Top

Here is a codepen: https://codepen.io/jon424/pen/XWzGNLe

In this example, if you select the toggle button, the image will be covered by another div. The white square will gradually cover the image from the top of the image to the bottom.

I simply want to reverse this effect. I want the white square to cover the image, moving from the bottom of the image to the top.

I’ve tried using a negative value for max-height in the .covered class, but that wasn’t working. Any idea on how I can go about doing this?

HTML

 <button>Toggle</button>
<div class="parent">
  <img class="child1" src="https://picsum.photos/200/300">
      <div class="child1 child2"></div>
    </div>

CSS

.parent {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 10px;
    overflow: hidden;
}

.child1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.child2 {
    z-index: 1;
    background: #ffffff;
    transition: max-height 1s ease-in-out;
    max-height:100%;
}

.covered {
  max-height: 0px;
}

JS

document.querySelector('.child2').classList.add('covered');

document.querySelector('button').addEventListener('click', () => { document.querySelector('.child2').classList.toggle('covered');});