Change divs as page scrolls - css

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>

Answer 2

If you want to change the size of an element on hover without affecting others then you can use just the transform: scale.
If you also (or instead of) alter the width and/or height then unless the element is positioned in some non-relative way it will 'disturb' elements around it.
So try:
#changeme:hover {
transform: scale(1.5);
}
When you come to want to expand elements as they come into view, investigate IntersectionObserver. You can attach an observer to each of those elements and as they appear you can transform them, or use CSS animate and/or a delay setting to get the sort of effects shown in the linked site.