Difficulty resolving white space below my webpage - html

Question

I am a noob at HTML/CSS, and I'm trying to put a timeline on my website. I've run into a strange issue: I have a weird block of space under my #timeline class anytime I try to change the height.
What I've tried: I've read some posts about absolute/relative positioning and how if you try to change the height with An absolute or relatively positioned object, it will leave a gap of space between where it is and where it used to be.
With this information, I'm not sure how to reposition my timeline elements without using absolute positioning, because I don't want the timeline to be too large. Any recommendations or tips would be great. here's my code (please view in full window - timeline has some compatibility issues with safari right now:( use chrome if you can)
My CSS is kind of long, but I wanted you to see the whole webpage and understand how It all worked together. I experienced the issue after styling the body and #timeline component, so I believe the styling below these components is causing the issues.
Any pointers would be appreciated.
html{
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1{
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li{
float: left;
padding-right: 30px;
}
li a{
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover{
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul{
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2{
text-align: center;
font-size: 25px;
}
h2 p{
font-size: 18px;
}
.right-button{
float: right;
padding-right: 47px
}
.other-button{
float: right;
padding-right: 30px;
}
body{
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin: 0;
}
#timeline{
margin-left: 470px;
height: 400px;
width: 500px;
display:flex;
background-color: #031625;
}
#timeline:hover .t1-item{
max-width: 400px;
max-height: 500px;
width:23.3333%;
}
.t1-item:before, .t1-item:after{
transform: translate3d(0,0,0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item{
transform: translate3d(0,0,0);
position: relative;
width: 25%;
height: 100vh;
min-height: 600px;
color:white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after{
background: rgba(3,22,37,0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before{
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0,0,0) translateY(50%);
transition: opacity .5s ease,
transform .5s ease;
}
.t1-item:hover{
width: 30%;
}
.t1-item:hover:after{
opacity: 0;
}
.t1-item:hover:before{
opacity: 1;
transform: translate3d(0,0,0) translateY(0);
transition: opacity 1s ease, transform 1s ease
.25s;
}
.t1-item:hover .t1-content{
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg{
filter: grayscale(0);
}
.t1-content{
transform: translate3d(0,0,0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3{
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p{
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg{
transform: translate3d(0,0,0);
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Header </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li><a href="#projects" >Projects</a></li>
<li class="right-button">Contact Info</li>
<li class="other-button">Test</li>
<li class="other-button">Testing</li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://eng-dev.stanford.edu/sites/default/files/styles/full_width_banner_tall/public/chalkboard_web.jpg?itok=xqk3ef56)">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>

Answer 1

If i'm understanding your problem correctly, it's the .t1-item {height: 100vh;} that's giving you the issue, along with the min-height: 600px. That is pushing the .t1-item down in its pre-hover state, thus creating that space.
An alternative to using these height specifications would be to use margin-top to position your instances of .t1-item:
.t1-item {
transform: translate3d(0,0,0);
position: relative;
width: 25%;
color: white;
overflow: hidden;
transition: width 0.5s ease;
margin-top: 20rem;
}