最大高度不适用于底部的div滑动条

Question

我想创建一个带有一些图片的网站。当用户将鼠标悬停在图像上时，div将从页面底部滑出，其中包含有关该图像的一些信息。与此页面类似：https://bewegen.com/en/bike-share-network

这就是我现在拥有的：

https://jsfiddle.net/ugto4sr5/4/

.box {
  width: 20rem;
  height: 20rem;
  background-color: red;
  position: absolute;
  bottom: 0;
  overflow-y: hidden;
  max-height: 0rem;/* approximate max height */
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: in-ease-out;
}

img:hover+.box {
  max-height: 30rem;
}

<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" alt="" height=3 0 width=3 0>
<div class="box">
</div>

它可以正常工作，但是如果我将代码复制到文件中并运行它。最大高度不起作用，在我悬停之前，它保持为20雷姆。