Unpleasant small movement in overlapped expanding div - html

Question

When you open it, click in the color aqua div, then make a hover in the first box and click where it says "CLICK ME". You'll see that when the appearing div reaches the border of the windows, there is a little movement in the top border, which is very annoying. I tried a lot of things but i wasn't able to remove it. Any ideas? Thanks in advance.
/* ////// INITIAL RESET AND CONFIGURATIONS ////// */
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
/* Hide the other pages */
}
body {
margin: 0;
padding: 0;
border: 0;
/*height: 100%; Also works 100vh (View percentage lenght) */
overflow: hidden;
}
ul {
list-style: none;
text-align: center;
}
a {
display: block;
border: none;
text-decoration: none;
color: black;
cursor: default;
}
/*================================== PAGE SLIDE TRANSITION ==================================*/
/* Basic Style/Positioning for all Pages */
.pages,
.page,
.page .backbutton,
.page .nextbutton {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.page .backbutton,
.page .nextbutton {
height: 10%;
background-color: red;
z-index: 1;
}
.page .backbutton {
top: 0%;
}
.page .nextbutton {
top: 90%;
background-color: aqua;
}
/* Pages */
#i2 {
top: 100%;
}
#i3 {
top: 200%;
}
/* Slide Effect */
.pages {
-webkit-transition: top 0.8s;
-moz-transition: top 0.8s;
-o-transition: top 0.8s;
-ms-transition: top 0.8s;
transition: top 0.8s;
}
#a1:target .pages {
top: 0%;
}
#a2:target .pages {
top: -100%;
}
#a3:target .pages {
top: -200%;
}
#i1 {
background-color: #fff;
}
#i2 {
background-color: #bbb;
}
#i3 {
background-color: #777;
}
/*================================== PAGE ONE ==================================*/
/* ////// ELEMENT'S POSITION ////// */
#i1 {
background-color: bisque;
/*position:relative; stacking context */
}
/* ////// HOVER ////// */
.menu li a:hover {
background: teal;
visibility: visible;
}
#i1 .menu li a:hover + .image {
top: 0;
}
#i1 .menu li a {
z-index: 3;
position: relative;
}
#i1 li .image {
position: absolute;
width: 17.5%;
padding: 0px;
border: 0px #999999 solid;
margin: 0px;
height: 100%;
transition: 0.8s;
top: -50%;
}
#i1 .image1 {
background-color: grey;
left: 10%;
}
#i1 .image2 {
background-color: #777777;
left: 27.5%;
}
#i1 .image3 {
background-color: #555555;
left: 45%;
}
#i1 .image4 {
background-color: #333333;
left: 62.5%;
}
/* ////// ICON ////// */
[data-icon]:before {
/* Allows to show the icons */
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon:before {
/* Shows the icon */
float: left;
content: '\e60e';
font-family: 'icomoon';
speak: none;
color: red;
font-size: 50px;
}
#button_menu {
position: absolute;
display: none;
}
label {
position: absolute;
float: left;
top: 75%;
left: 3%;
border: 1px green solid;
}
#button_menu + label {
cursor: pointer;
}
/* ////// MENU OPTION's TRANSITIONS ////// */
.menu {
list-style: none;
box-sizing: border-box;
width: 70%;
padding: 0;
margin: 0;
margin-top: 80vh;
margin-left: 10%;
overflow: hidden;
border: 1px solid #FF0000;
}
li.option {
float: left;
display: inline-block;
box-sizing: border-box;
padding: 0px 55px 0px 55px;
width: 25%;
margin: 0;
margin-top: 20px;
background: yellow;
border: 1px solid #000;
opacity: 0;
transition: .5s;
}
#button_menu:checked ~ .menu a {
cursor: pointer;
}
#button_menu:checked ~ .menu .option {
margin-top: 0px;
opacity: 1;
}
li.option:first-child {
transition-delay: .6s;
}
li.option:nth-child(2) {
transition-delay: .4s;
}
li.option:nth-child(3) {
transition-delay: .2s;
}
li.option:last-child {
transition-delay: 0s;
}
#button_menu:checked ~ .menu li.option:first-child {
transition-delay: 0s;
}
#button_menu:checked ~ .menu li.option:nth-child(2) {
transition-delay: .2s;
}
#button_menu:checked ~ .menu li.option:nth-child(3) {
transition-delay: .4s;
}
#button_menu:checked ~ .menu li.option:last-child {
transition-delay: .6s;
}
/*================================== PAGE TWO ==================================*/
h1,
p {
text-align: center;
padding: 0;
opacity: 0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
}
.overlay {
display: block;
100%;
width: 100%;
margin: 0;
padding: 0;
}
#ov .overlay_open {
position: absolute;
margin: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9|);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
background-color: chocolate;
z-index: 2;
}
/* ////// CENTERING THE PICTURES //////*/
.container {
/*occupes all the screen and hide the divs bigger than it*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.center {
position: absolute;
left: 50%;
top: 50%;
}
/*div centers in the middle of its parent, with 0
height and with (just a dot)*/
.center-container {
position: absolute;
left: -2500px;
top: -2500px;
/*move it left and top to be centered exactly in the middle from the center doth*/
width: 5000px;
height: 5000px;
line-height: 5000px;
text-align: center;
/*centers horizontally the pictures*/
overflow: hidden;
}
.dyn-box {
display: inline-block;
vertical-align: middle;
line-height: 100%;
}
/*-----------------***-----------------*/
.box {
float: left;
width: 130px;
height: 130px;
margin: 10px;
border: 5px black solid;
overflow: hidden;
}
.b4 {
clear: both;
}
.picture {
position: absolute;
width: 130px;
height: 130px;
background-color: beige;
}
.mask {
position: absolute;
width: 130px;
height: 130px;
overflow: hidden;
background-color: coral;
opacity: 0;
transition: all 0.3s ease-in-out 0.1s;
}
.box .mask:hover {
opacity: 0.4;
}
.box .mask:hover h1 {
transform: scale(1);
opacity: 1;
}
.box .mask:hover p {
transform: scale(1);
opacity: 1;
transition-delay: .2s;
}
#ov:target .overlay_open {
visibility: visible;
opacity: 0.8;
-webkit-transform: scale(1);
transform: scale(1);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="rock_page.css">
<link rel="stylesheet" type="text/css" href="icons_files/style.css">
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="main.js"></script>
<title>Rock n' Roll</title>
</head>
<body>
<div id="a1">
<div id="a2">
<div id="a3">
<div class="pages">
<!-- Second Page #a1 -->
<div id="i1" class="page">
<input type="checkbox" name="button_menu" id="button_menu" />
<label for="button_menu" class="icon"></label>
<!--This also works for the icon instead of the CSS code
<span aria-hidden="true" data-icon="" class="down-arrow">-->
<ul class="menu">
<li class="option">Link 1
<div class="image image1"></div>
</li>
<li class="option">Link 2
<div class="image image2"></div>
</li>
<li class="option">Link 3
<div class="image image3"></div>
</li>
<li class="option">Link 4
<div class="image image4"></div>
</li>
</ul>
</div>
<!-- Second Page #a2 -->
<div id="i2" class="page">
<div class="container">
<div class="center">
<div class="center-container">
<span class="dyn-box">
<div class="box b1">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
CLICK ME
</div>
</div>
<div class="box b2">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
<div class="box b3">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
<div class="box b4">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
<div class="box b5">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
<div class="box b6">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
</span>
</div>
</div>
</div>
<div id="ov" class="overlay">
<div class="overlay_open">
</div>
</div>
</div>
<!-- Third Page #a3 -->
<div id="i3" class="page">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This simplified version works exactly like i want, and the transition is more fluid too.
body, .container { margin: 0; padding: 0;}
a {position: absolute}
.container .overlay {
position: fixed;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
background-color: chocolate;
z-index: 2;
}
#c:target .overlay {
visibility: visible;
opacity: 0.8;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
<body>
<div id="c" class="container">
OPEN
<div class="overlay">
</div>
</div>
</body>