Change divs as page scrolls

Question

I'm trying to do something like this demo. As the page scrolls down, the various parts become visible. I added a jsfiddle here. As you can see, when the second line of text is hovered it overwrites the line above it. I know my code is using hover and the demo site changes with scrolling but I thought this would be easier to get to work first.

Would someone please explain how do I make it so only the contents of the div with ID changeme is enlarged without affecting the others? Here's my code:

    <style>
    #changeme {
     height: 50px;
     width:100px;
     transition: all .5s ease-in-out;
    }

    #changeme:hover {
     height: 200px;
     width:100px;
     transform: scale(1.5);  
    }
    </style>

    <div>
      <h1>Title</h1>
      <div>
        <div>Main text<div>
        <div id="changeme">
          <div>Some Text</div>
          <div><img src="example.png"></div>
        </div>
      </div>
    </div>

Answer 1

Run this in full-page mode. Here you go:

  var ScrollFunction = function() {
        var y = window.scrollY;
        var viewport = window.innerWidth;
        
       var counter = (y/viewport) * 100;
        if ( counter >= 10) {
            document.getElementById("containerOne").className = "container show"
        }
        if (counter >= 20) {
            document.getElementById("containerTwo").className = "container show"
        }
        if (counter >= 30) {
            document.getElementById("containerThree").className = "container show"
        }
    };

window.addEventListener("scroll", ScrollFunction);

 *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: #fff;
        }
        body{
            height: 200vh;
            background-color: #313131;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .container{
            width: 80%;
            height: 500px;
            border: 1px solid rgb(126, 126, 126);
            margin-bottom: 5vh;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: row;

        }
        .box{
            width: calc(80%/4);
            display: flex;
                height: 50%;
                opacity: 1;
            margin-left: 10px;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.185);
            animation: 1s 1 linear normal showUp;
            transition: .4s all;
        }
        .box:first-child{
                margin: 0;
        }
        .box:hover{
        transform: scale(1.5); 
        }
        .show{
            display:flex;
        }
        
        @keyframes showUp {
            0%{
                height: 0;
                opacity: 0;
                display: none;
            }
           100%{
                display: flex;
                height: 50%;
                opacity: 1;
            }
        }

<div id="containerOne" class="container">
        <div class="box">MyBox1</div>
        <div class="box">MyBox2</div>
        <div class="box">MyBox3</div>
        <div class="box">MyBox4</div>
    </div>

    <div id="containerTwo" class="container">
        <div class="box">MyBox1</div>
        <div class="box">MyBox2</div>
        <div class="box">MyBox3</div>
        <div class="box">MyBox4</div>
    </div>

    <div id="containerThree" class="container">
        <div class="box">MyBox1</div>
        <div class="box">MyBox2</div>
        <div class="box">MyBox3</div>
        <div class="box">MyBox4</div>
    </div>