Z-Index issues? - html

Question

If you run this snippet scroll to the bottom, you will notice that the pictures are not clickable. The issue I am facing is that I want the pictures to be clickable.
The pictures are hyperlinks to other pages.
I believe the issue has something to do with the z-index values.
window.sr = ScrollReveal();
sr.reveal('.reveal');
sr.reveal('.bar');
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}
.font {
font-family: 'Josefin Sans', sans-serif;
}
html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
}
section.s7 {
position: relative;
width: auto;
height: auto;
}
section.s7::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
}
/* Types of Headers */
section h1.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font: normal 300 64px/1'Josefin Sans', sans-serif;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
section h3.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font: normal 300 48px/1'Josefin Sans', sans-serif;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
section h5.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font: normal 300 32px/1'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
section h6.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font: normal 300 32px/1'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
section h1.main2 {
top: 25%;
left: 25%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font: normal 300 64px/1'Josefin Sans', sans-serif;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
#section01 {
background: url(http://wallpapercave.com/wp/LekAYO3.jpg) center center / cover no-repeat;
}
#section02 {
background: url(http://wallpapercave.com/wp/8iAP1eI.jpg) center center / cover no-repeat;
}
#section03 {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Flag_of_South_Vietnam.svg/2000px-Flag_of_South_Vietnam.svg.png) center center / cover no-repeat;
}
#section04 {
background: url(http://quotesideas.com/wp-content/uploads/2015/03/blue_backgrounds_happy_birthday_wallpaper.jpg) center center / cover no-repeat;
}
#section05 {
background: url(https://wallpaperscraft.com/image/neymar_barcelona_football_102872_3840x2400.jpg) center center / cover no-repeat;
}
#section06 {
background: url(http://www.walldevil.com/wallpapers/a60/golden-spiral-spiral-geometry-math-mathematics.jpg) center center / cover no-repeat;
}
#section07 {
background: url(http://www.cfau-pd.net/images/wallpaper-abstract/wallpaper-abstract-4.jpg) center center / cover;
}
.arrow a {
position: absolute;
bottom: 50px;
left: 50%;
/* z-index: 2; */
display: inline-block;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font: normal 400 20px/1'Josefin Sans', sans-serif;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
/*
.arrow a:hover {
opacity: .5;
}
*/
#section01 a,
#section02 a,
#section03 a,
#section03 a,
#section04 a,
#section05 a,
#section06 a {
padding-top: 60px;
}
/* WHITE ARROW */
#section01 a span,
#section04 a span,
#section05 a span,
#section06 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}
/* BLACK ARROW */
#section02 a span,
#section03 a span,
#section03 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid black;
border-bottom: 1px solid black;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb01 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
}
#keyframes sdb01 {
0% {
transform: rotate(-45deg) translate(0, 0);
}
20% {
transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
transform: rotate(-45deg) translate(0, 0);
}
}
/* NAV BAR */
ul.primarynav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
/*transform: translateX(-50%);*/
/* left: 50%; */
top: 0;
width: 100%;
z-index: 4;
opacity: 0.5;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: grey;
transition: 0.2s;
transition-timing-function: ease-in;
}
ul:hover {
opacity: 1;
}
.active {
color: grey;
}
/* NAV BAR 2 */
ul.navbar2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
color: black;
z-index: 6;
width: 100%;
opacity: 0.5;
}
ul:hover.navbar2 {
opacity: 1;
}
li.navbar2 {
float: left;
}
li a.navbar2 {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active2).navbar2 {
color: grey;
transition: 0.2s;
transition-timing-function: ease-in;
}
li a:hover.navbar2 {
color: grey;
}
.active {
color: grey;
}
/* Other styling */
header.mainpage {
textalign: center;
color: black;
position: relative;
}
#h1mainpage {
font-size: 2em;
padding: 2em;
color: black;
}
.maincontainer {
background: white;
opacity: 0.95;
margin: auto;
margin-top: 8px;
margin-bottom: 8px;
width: 95%;
text-align: center;
}
.secondcontainer {} .textalign {
text-align: center;
}
.curvededges {
border: 1px solid black;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
width: 95%;
margin: auto;
padding: 1em;
height: auto;
background: white;
color: black;
}
/* Images organization */
#containermain {
display: flex;
justify-content: space-between;
visibility: hidden;
z-index: 6;
}
#containermain div {
width: 20%;
display: inline-block;
height: auto;
background: rgb(255, 255, 255, 0);
}
#containermaintext div {
width: 250px;
height: auto;
background: rgb(255, 255, 255, 0);
}
#containermain div:first-child {
border-left: 0;
}
#containermain div:last-child {
border-right: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>
</head>
<body style="font: 'Josefin Sans', sans-serif; margin: 0;">
<ul class="mainpage primarynav">
<li><a class="font active" href="#">Home</a>
</li>
<li><a class="font" href="#section07">Classes</a>
</li>
<li><a class="font" href="#section02">About Me</a>
</li>
<li><a class="font" href="stemproject.html">STEM Project</a>
</li>
<li><a class="font" href="sports.html">Sports</a>
</li>
</ul>
<section id="section01" class="arrow">
<h1 class="main">Welcome</h1>
<h5 class="main"> <br> <br> <br> <br> A Website by John Ta </h5>
<span></span>Scroll
</section>
<!-- END SECTION01 -->
<section id="section02" class="arrow">
<h3 class="main" style="color: black;
">Filler</h3>
<h5 class="main" style="color: black;"> <br> <br> <br> <br> Filler</h5>
<span></span>Scroll
</section>
<!-- END SECTION02 -->
<section id="section03" class="arrow">
<h3 class="main" style="color: black">Filler</h3>
<h5 class="main" style="color: green"> <br> <br> <br> <br> Filler </h5>
<span></span>Scroll
</section>
<!-- END SECTION03 -->
<section id="section04" class="arrow">
<h3 class="main" style="color: black">Filler</h3>
<h5 class="main"> <br> <br> <br> <br> Filler </h5>
<span></span>Scroll
</section>
<!-- END SECTION04 -->
<section id="section05" class="arrow">
<h3 class="main">Filler</h3>
<h5 class="main"> <br> <br> <br> <br> Filler </h5>
<span></span>Scroll
</section>
<!-- END SECTION05 -->
<section id="section06" class="arrow" style="z-index: 6;">
<h3 class="main">What extracurriculars do I participate in?
</h3>
<h5 class="main"> <br> <br> <br> <br> Programming team, math team, CyberPatriot </h5>
<span></span>Scroll or Click Here to Learn More
</section>
<!-- END SECTION06 -->
<!-- BEGIN SECTION07 -->
<section id="section07" style="z-index: 0;" class="s7">
<ul class="mainpage navbar2">
<li><a class="font active" href="#">Home</a>
</li>
<li><a class="font navbar2" href="computerscience.html">Computer Science</a>
</li>
<li><a class="font navbar2" href="stem.html">STEM</a>
</li>
<li><a class="font navbar2" href="stw.html">STW</a>
</li>
<li><a class="font navbar2" href="math.html">Math</a>
</li>
<li><a class="font navbar2" href="humanities.html">Humanities</a>
</li>
<li><a class="font navbar2" href="physics.html">Physics</a>
</li>
<li><a class="font navbar2" href="spanish.html">Language</a>
</li>
<li><a class="font navbar2" href="#section02">About Me</a>
</li>
<li><a class="font navbar2" href="stemproject.html">STEM Project</a>
</li>
<li><a class="font navbar2" href="soccer.html">Sports</a>
</li>
</ul>
<div class="maincontainer">
<header class="mainpage">
<h1 class="font" id="h1mainpage" style="background: rgb(255,255,255,0)"> Use the navigation bar or click the pictures to begin </h1>
</header>
</div>
<!-- IMAGES -->
<div class="maincontainer font">
<!-- IMAGES ROW 1 -->
<div id="containermain" class="reveal">
<div>
<a href="physics.html">
<img src="images/atom.png" style="width: 100%;">
</a>
</div>
<div>
<a href="math.html">
<img src="images/mathematics.png" style="width: 100%;">
</a>
</div>
<div>
<a href="humanities.html">
<img src="images/books.png" style="width: 100%;">
</a>
</div>
<div>
<a href="stem.html">
<img src="images/stem.png" style="width: 100%;">
</a>
</div>
</div>
<!-- IMAGES ROW 1 SUPPLEMENT -->
<div id="containermain" class="reveal">
<div>
<p class="textalign">Physics</p>
</div>
<div>
<p class="textalign">Mathematics</p>
</div>
<div>
<p class="textalign">Humanities</p>
</div>
<div>
<p class="textalign">STEM</p>
</div>
</div>
<!-- IMAGES ROW 2 -->
<div id="containermain" class="reveal">
<div>
<a href="STW.html">
<img src="images/stw.png" style="width: 100%;">
</a>
</div>
<div>
<a href="math.html">
<img src="images/language.png" style="width: 100%;">
</a>
</div>
<div>
<a href="computerscience.html">
<img src="images/mac.png" style="width: 100%;">
</a>
</div>
<div>
<a href="aboutme.html">
<img src="images/stickfigure.png" style="width: 40%; height: 40%; margin: auto;">
</a>
</div>
</div>
<!-- IMAGES ROW 2 SUPPLEMENT -->
<div id="containermain" class="reveal">
<div>
<p class="textalign">STW</p>
</div>
<div>
<p class="textalign">Language</p>
</div>
<div>
<p class="textalign">Computer Science</p>
</div>
<div>
<p class="textalign">About Me</p>
</div>
</div>
<!-- IMAGES ROW 3 -->
<div id="containermain" class="reveal">
<!-- Image 1 (http://prcsh.org/wp-content/uploads/2014/03/Other-Mail-icon.png) -->
<div>
<a href="contactme.html">
<img src="images/Mail.png" style="width: 100%;">
</a>
</div>
<!-- Image 2 (http://users.wpi.edu/~rlapointe/assets/massAcademyLogo.png) -->
<div>
<a href="http://www.massacademy.org/">
<img src=" " style="width: 100%;">
</a>
</div>
<!-- Image 3 (https://upload.wikimedia.org/wikipedia/en/thumb/4/47/FC_Barcelona_(crest).svg/1010px-FC_Barcelona_(crest).svg.png -->
<div>
<a href="soccer.html">
<img src="images/barcacrest.png" style="width: 100%;">
</a>
</div>
<!-- Image 4 (https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Nuvola_Math_and_Inf.svg/2000px-Nuvola_Math_and_Inf.svg.png) -->
<div>
<a href="math.html">
<img src="images/chrome.jpg" style="width: 100%;">
</a>
</div>
</div>
<!-- IMAGES ROW 3 SUPPLEMENT -->
<div id="containermain" class="reveal">
<div>
<p class="textalign">Contact Me</p>
</div>
<div>
<p class="textalign"></p>
</div>
<div>
<p class="textalign">Sports</p>
</div>
<div>
<p class="textalign">STEM Project</p>
</div>
</div>
</div>
<footer class="curvededges font reveal">John Ta</footer>
</section>

Answer 1

Its because of the section with id="section07". If you remove that section and replace it with a div then you are able to click on the images.
Line 473 of your code replace <section id="section07" style="z-index: 0;" class="s7"> with <div id="section07" class="s7">
And line 632 replace </section> with </div>
There is an issue with your z-index values in your css section elements, but you have multiple css elements including section so I will not correct that, instead I provided you with a more simple fix