(CSS) Want to make the contents in my banner enlarge when banner is hovered over

Issue

Currently only the banner is working the text inside doesn't move with it. (I have tried overflow: hidden; but isn't work.)

    .banner {
        background-color: #996633;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100px;
        box-shadow: 0px 8px 20px 5px black;
        transition: height 0.5s;
        overflow: hidden;
    }

    .banner:hover {
        height: 120px;
    }

    .navbar {
        position: absolute;
        right: 13px;
        top: 17px;
        font-size: 15px;
    }


    #about-page {
        position: relative;
        right: 130px;
        bottom: 43px;  /* Example of one of the tabs, the rest same as this */
    }

<section class="banner">
  <div id="tab">
    <nav class="navbar">
      <h2 id="about-page"><a href="#">About Us</a></h2>
      </nav>
  </div>
</section>

Solution

.banner {
  background-color: #996633;
  width: 100%;
  height: 100px;
  padding: 40px;
  text-align: center;
  color: #fff;
}
.banner:hover h2 {
    transform: scale(1.5);
    transition: transform 0.2s;
}

<section class="banner">
    <h2>Hello World</h2>
</section>

Answered By - Patel Harsh