Создание оверлейной анимации с React JS

Question

Я пытаюсь создать эффект наложения на примере w3schools в React JS:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom

Стандартное наложение (без анимации) отлично работает на моей странице, но я не вижу ничего, применяя анимационную версию по ссылке выше с CSS и кодом (преобразованным в JSX).

Вот что я пробовал:

CSS:

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

JSX возврат:

            <img
                src="https://www.w3schools.com/howto/img_avatar.png"
                alt="Avatar"
                className="image"
                style={{ width: "100%" }}
            />
            <div className="middle">
                <div className="text">John Doe</div>
            </div>
        </div>