Как я могу получить этот div в масштабе с размером окна

Question

Завершить нуб и работать над проектом для школы. У меня есть div с вложенным div с 2 изображениями. Моя главная цель - когда изображение наведено, другое изображение меняет свою непрозрачность и показывает. Тем не менее, мне сказали, что div не может масштабироваться с размером окна. В любом случае, я могу изменить свой код или добавить что-нибудь, чтобы это произошло? Я добавил сегмент кода CSS, а в середине - индексный код. html.

.container-inner {
  position: relative;
}

.ball-container {
  position: absolute;
  left: 65%;
  bottom: 18%;
}

.ball-container .label {
  position: absolute;
  transform: translate(-20%, -75%) scale(.7);
  opacity: 0;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.ball-container .ball-img {
  position: absolute;
  transform: scale(.8);
}

.ball-container:hover .label {
  opacity: 1;
}

<div id="top-container" class="top-container">
  <img class="bkg-img" src="images/top_container/sceneBkg.png" alt="Landscape">
  <img id="large-cloud1" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
  <img id="large-cloud2" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
  <img id="large-cloud3" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
  <img id="small-cloud1" class="small-cloud" src="images/top_container/cloud1.png" alt="cloud">
  <img id="small-cloud2" class="small-cloud" src="images/top_container/cloud1.png" alt="cloud">

  <img class="southpaw-body-img" src="images/top_container/southpaw_body.png" alt="head">
  <img class="southpaw-head-img" src="images/top_container/southpaw_head.png" alt="body">

  <img class="doghouse-label" src="images/top_container/doghouse_label.png" alt="doghouse label">
  <img class="doghouse-img" src="images/top_container/doghouse.png" alt="doghouse">


  <div class="book-container">
    <div class="container-inner">
      <img class="label" src="images/top_container/book_label.png" alt="book label">
      <img class="book-img" src="images/top_container/bookStack.png" alt="book stack">
    </div>
  </div>

  <div class="banner-container">
    <div class="container-inner">
      <img class="label" src="images/top_container/banner_label.png" alt="banner label">
      <img class="banner-img" src="images/top_container/banner.png" alt="banner">
    </div>
  </div>

  <div class="ball-container">
    <div class="container-inner">
      <img class="label" src="images/top_container/ball_label.png" alt="ball label">
      <img class="ball-img" src="images/top_container/ball.png" alt="ball">
    </div>
  </div>

  <div class="weight-container">
    <div class="container-inner">
      <img class="label" src="images/top_container/weight_label.png" alt="weight label">
      <img class="weight-img" src="images/top_container/weight.png" alt="weight">
    </div>
  </div>

  <img class="logo-img" src="images/top_container/logo.png" alt="body">
</div>