I have a vertical image in a hexagon responsive grid and I would like to blow it up so that the image doesn't have space on the left and right sides (shown in my code).
If someone could help me with this, that would be great as I have been having troubles trying to use both vertical and horizontal images in my grid and when coming upon vertical images, having issues getting it to fill the full hexagon without gaps on each side.
#grid {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 2% auto;
overflow: hidden;
font-size: 15px;
list-style-type: none;
}
.hexagon {
position: relative;
visibility: hidden;
outline: 1px solid transparent;
}
.hexagon::after {
content: '';
display: block;
padding-bottom: 86.602%;
}
.inside {
position: absolute;
width: 96%;
padding-bottom: 110.851%;
margin: 0 2%;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent;
-webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
-ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}
.inside * {
position: absolute;
visibility: visible;
outline: 1px solid transparent;
}
.link {
display: block;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
background: gray;
-webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
-ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}
.hexagon img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
-ms-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
.inner-content {
top: 49%;
left: 49%;
transform: translate(-49%, -49%);
}
.hexagon h1,
.hexagon p {
position: relative;
white-space: normal;
color: white;
}
.hexagon h1 {
font-size: 1.4em;
color: white;
text-shadow: 2px 2px #000;
}
.hexagon h1::after {
position: relative;
left: 45%;
width: 10%;
text-align: center;
}
/* sizing and row indents */
#media (min-width:1201px) {
#grid {
padding-bottom: 4.4%
}
.hexagon {
width: 20%;
}
.hexagon:nth-child(9n+6) {
margin-left: 10%;
}
}
#media (max-width: 1200px) and (min-width:901px) {
#grid {
padding-bottom: 5.5%
}
.hexagon {
width: 25%;
}
.hexagon:nth-child(7n+5) {
margin-left: 12.5%;
}
}
#media (max-width: 900px) and (min-width:601px) {
#grid {
padding-bottom: 7.4%
}
.hexagon {
width: 33.333%;
}
.hexagon:nth-child(5n+4) {
margin-left: 16.666%;
}
}
#media (max-width: 600px) {
#grid {
padding-bottom: 11.2%
}
.hexagon {
width: 50%;
}
.hexagon:nth-child(3n+3) {
margin-left: 25%;
}
}
#media (max-width: 400px) {
#grid {
font-size: 13px;
}
}
<ul id="grid">
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
</ul>
Instead of giving the images width: auto and height: 100%...
.hexagon img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
transform: rotate3d(0,0,0,0deg);
}
Do the reverse, width: 100% and height: auto...
.hexagon img {
left: -100%;
right: -100%;
width: 100%; /* adjustment */
height: auto; /* adjustment */
margin: 0 auto;
transform: rotate3d(0,0,0,0deg);
}
#grid {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 2% auto;
overflow: hidden;
font-size: 15px;
list-style-type: none;
}
.hexagon {
position: relative;
visibility: hidden;
outline: 1px solid transparent;
}
.hexagon::after {
content: '';
display: block;
padding-bottom: 86.602%;
}
.inside {
position: absolute;
width: 96%;
padding-bottom: 110.851%;
margin: 0 2%;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent;
-webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
-ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}
.inside * {
position: absolute;
visibility: visible;
outline: 1px solid transparent;
}
.link {
display: block;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
background: gray;
-webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
-ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}
.hexagon img {
left: -100%;
right: -100%;
width: 100%; /* adjustment */
height: auto; /* adjustment */
margin: 0 auto;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
-ms-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
.inner-content {
top: 49%;
left: 49%;
transform: translate(-49%, -49%);
}
.hexagon h1,
.hexagon p {
position: relative;
white-space: normal;
color: white;
}
.hexagon h1 {
font-size: 1.4em;
color: white;
text-shadow: 2px 2px #000;
}
.hexagon h1::after {
position: relative;
left: 45%;
width: 10%;
text-align: center;
}
/* sizing and row indents */
#media (min-width:1201px) {
#grid {
padding-bottom: 4.4%
}
.hexagon {
width: 20%;
}
.hexagon:nth-child(9n+6) {
margin-left: 10%;
}
}
#media (max-width: 1200px) and (min-width:901px) {
#grid {
padding-bottom: 5.5%
}
.hexagon {
width: 25%;
}
.hexagon:nth-child(7n+5) {
margin-left: 12.5%;
}
}
#media (max-width: 900px) and (min-width:601px) {
#grid {
padding-bottom: 7.4%
}
.hexagon {
width: 33.333%;
}
.hexagon:nth-child(5n+4) {
margin-left: 16.666%;
}
}
#media (max-width: 600px) {
#grid {
padding-bottom: 11.2%
}
.hexagon {
width: 50%;
}
.hexagon:nth-child(3n+3) {
margin-left: 25%;
}
}
#media (max-width: 400px) {
#grid {
font-size: 13px;
}
}
<ul id="grid">
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
<li class="hexagon">
<div class="inside">
<a class="link" href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
<div class="inner-content">
<h1>title</h1>
</div>
</a>
</div>
</li>
</ul>
Related
I have a simple HTML site with CSS going, but i noticed a very very small line next to all my uploaded images that i use for links. I'm guessing that this is like a direction to img position, but it is so small that i can't actually see what it is. Anyone know what it is and how i get rid of it???
Picture or it didn't happen
the 4 images, with 1 working and 3 displaying the thingy
body {
background-image: url("Baggrund.png");
}
.title {
font-family: sans-serif;
color: #2E2E2E;
font-size: 50px;
margin-top: 100px;
font-weight: 1000;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
margin-left: 50px;
margin-top: 50px;
}
.image {
display: block;
width: 200px;
height: 200px;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.overlay {
position: absolute;
opacity: 0;
transition: all .3s ease;
background-color: #008cba;
}
.container:hover .overlay,
.container:hover .overlayFade {
opacity: 1;
}
<div align="center">
<div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
<div class="overlay overlayFade">
<div class="text">QGIS Tips & Tricks</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
<div class="overlay overlayFade">
<div class="text">KortInfo</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
<div class="overlay overlayFade">
<div class="text">Metadatabasen</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
<div class="overlay overlayFade">
<div class="text">A-Z</div>
</div>
</div>
</div>
That is the underline that is present default in the anchor tag i just used text-decoration: none on the anchor tag and it is gone
I hope this is what you are looking for
body {
background-image: url("Baggrund.png");
}
.title {
font-family: sans-serif;
color: #2E2E2E;
font-size: 50px;
margin-top: 100px;
font-weight: 1000;
}
a
{
text-decoration:none;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
margin-left: 50px;
margin-top: 50px;
}
.image {
display: block;
width: 200px;
height: 200px;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.overlay {
position: absolute;
opacity: 0;
transition: all .3s ease;
background-color: #008cba;
}
.container:hover .overlay,
.container:hover .overlayFade {
opacity: 1;
}
<div align="center">
<div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
<div class="overlay overlayFade">
<div class="text">QGIS Tips & Tricks</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
<div class="overlay overlayFade">
<div class="text">KortInfo</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
<div class="overlay overlayFade">
<div class="text">Metadatabasen</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
<div class="overlay overlayFade">
<div class="text">A-Z</div>
</div>
</div>
</div>
I'm looking for a way to keep my fixed position images, which are placed in the background of the page via z-index, always in the center.
Right now they are in the center, but when I start scrolling, they don't move down the page and are therefore no longer centered.
I've tried setting the image container to fixed positioning with top and left 50%. I've also tried using 50vh and 50vw, and have tested other vh and vw values.
* { padding: 0; margin: 0; box-sizing: border-box; }
body {
padding: 30px;
}
li.track {
display: block;
font-size: 5rem;
margin-bottom: 15px;
}
li.track:hover {
color: transparent;
-webkit-text-stroke-color: #18181b;
-webkit-text-stroke-width: 3px;
}
li.track:hover .album-art {
display: block;
}
.album-art {
z-index: -10;
position: fixed;
left: 47vw;
top: 12vh;
width: 90%;
height: 50%;
max-height: 450px;
display: none;
opacity: 0.5;
overflow: hidden;
transform: translateX(-50%);
}
.album-art img {
width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
<div class="tracks">
<ol>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/michael-nau.jpg"></div>
<p class="track-name">King Princess - 'Cheap Queen'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="hhttps://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/louie-short.jpg"></div>
<p class="track-name">Charly Bliss - 'Capacity'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/P4K-Tom-Waits-Jim-Jarmusch_PitchHeader.jpg"></div>
<p class="track-name">Julia Jacklin - 'Good Guy'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/kevin-abstract.png"></div>
<p class="track-name">Kevin Abstract - 'Georgia'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/okey-dokey.jpg"></div>
<p class="track-name">Okey Dokey - 'Wag Your Tail'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/fruit-bats.jpg"></div>
<p class="track-name">Devendra Banhart - 'Kantori Ongaku'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/michael-nau.jpg"></div>
<p class="track-name">Michael Nau - 'Rides Through The Morning'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/fruit-bats.jpg"></div>
<p class="track-name">Hop Along - 'Prior Things'</p>
</a>
</li>
<ol>
</div>
I want the images that appear when hovered to always be in the center of the page (scrolled or not).
try this css:
body {
padding: 30px;
}
li.track {
display: block;
font-size: 5rem;
margin-bottom: 15px;
}
li.track:hover {
color: transparent;
-webkit-text-stroke-color: #18181b;
-webkit-text-stroke-width: 3px;
}
li.track:hover .album-art {
display: block;
}
.album-art {
z-index: -10;
position: fixed;
left: 50%;
top: 50%;
width: 90%;
height: 50%;
max-height: 450px;
display: none;
opacity: 0.5;
overflow: hidden;
transform: translate(-50%,-50%);
}
.album-art img {
width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
thank you
I would like to increase the height of my images to 400px. However the images don't fill the div while maintaining the aspect ratio.
I previously added height:100% to my images while adding a fixed height of 400px to my parent div, then adding object-fit: cover to the images. However, on page resize, the images do not maintain their ratio and instead squash / collapse.
Any help would be great. Thank you.
#test {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#test h2 {
font-family: 'Poppins';
text-transform: uppercase;
font-weight: 600;
font-size: 1.3em;
color: #333;
margin-bottom: 20px;
}
#picwrapper {
width: 85%;
}
#media only screen and (max-width: 986px) {
#picwrapper {
flex-direction: column;
}
}
#picwrapper {
display: flex;
flex-wrap: wrap;
}
.third {
width: 33.3333333333%;
position: relative;
}
#media only screen and (max-width: 986px) {
.third {
width: 100%;
}
}
.third img {
max-width: 100%;
height: auto;
display: block;
padding-top: 10%;
/* 4:3 Aspect Ratio */
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
}
.overlay-text {
font-family: 'Poppins';
font-weight: 500;
}
.third:hover .overlay {
opacity: 1;
}
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<section id="test">
<div id="picwrapper">
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Parkash Sandhu</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">Flo Music</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">British Athletics</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Audi</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-
_August_31.jpg">
<a href="Virgin Atlantic">
<div class="overlay">
<h1 class="overlay-text">Virgin Atlantic</h1>
</div>
</a>
</div>
</div>
</section>
In what follows, I'm making some assumptions about what you're after.
I'm assuming that you want the images to maintain their aspect ratio (4:3) at all times, but still scale larger and smaller proportionally as the screen grows/shrinks.
Below, you'll find a different implementation of your code, but one that I think captures what you're going for. At least, maybe it'll get you going in the right direction.
(BTW, Credit to Andy Bell for this aspect ratio technique. See here: https://andy-bell.design/wrote/creating-an-aspect-ratio-css-utility/)
[class*="aspect-ratio-"] {
display: block;
position: relative;
width: 100%;
}
[class*="aspect-ratio-"] > * {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.aspect-ratio-tv {
padding-top: 75%; /* 4:3 */
}
.gallery {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.gallery {
width: 100%;
}
.gallery li {
flex-basis: 100%;
}
#media screen and (min-width: 580px) {
.gallery li {
flex-basis: 50%;
}
}
#media screen and (min-width: 960px) {
.gallery li {
flex-basis: 33.33333%;
}
}
.gallery img {
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.overlay-text {
color: white;
font-size: 20px;
text-decoration: none;
}
.overlay:hover {
opacity: 1;
text-decoration: none;
}
<ul class="gallery">
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/phvbkGThElM/800x600" alt="A neon ferris wheel" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/H_mTtLykvKs/800x682" alt="A dimly lit drum kit" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/Hc42xXu_WOg/800x567" alt="Blueberries, close up" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/MfynxC5_tiU/800x999" alt="High angle waterfall" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/7ZTx1iA7a7Q/800x397" alt="Sunset coastal scence" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/pRvy1j4aINE/800x785" alt="High angle shot of a recording studio" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
</ul>
See here for a pen: https://codepen.io/anon/pen/oOeBOj
Dont specify a width, just height.
.moon
{
height: 100%;
}
Specifying a width and height will squash the images; just specify the height.
img {
height: 50%; /*Change this to what you want.*/
}
#test {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#test h2 {
font-family: 'Poppins';
text-transform: uppercase;
font-weight: 600;
font-size: 1.3em;
color: #333;
margin-bottom: 20px;
}
#media only screen and (max-width: 986px) {
#picwrapper {
flex-direction: column;
}
}
#picwrapper {
display: flex;
flex-wrap: wrap;
}
.third {
width: 33.3333333333%;
position: relative;
}
#media only screen and (max-width: 986px) {
.third {
width: 100%;
}
}
.third img {
height: auto;
display: block;
padding-top: 10%;
/* 4:3 Aspect Ratio */
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
}
.overlay-text {
font-family: 'Poppins';
font-weight: 500;
}
.third:hover .overlay {
opacity: 1;
}
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<section id="test">
<div id="picwrapper">
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Parkash Sandhu</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">Flo Music</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">British Athletics</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Audi</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-
_August_31.jpg">
<a href="Virgin Atlantic">
<div class="overlay">
<h1 class="overlay-text">Virgin Atlantic</h1>
</div>
</a>
</div>
</div>
</section>
When a new item I want handle the other items will have a distance similar to the new item, but only processed by css okay? If possible, I do not want to handle by adding the distance available for the item as this is in contravention of the design...................................................................
Thanks for your help!
.list_item_grid {
padding: 0 7px;
margin-bottom: 63px;
list-style: none;
}
.list_item_grid .item {
float: left;
width: calc(100%/4 - 2px);
margin-right: 2px;
margin-bottom: 7px;
}
.list_item_grid .item:last-child {
margin-right: 0;
}
.list_item_grid .thumb_img {
height: 180px;
position: relative;
overflow: hidden;
}
.list_item_grid img {
position: absolute;
width: auto;
max-height: 100%;
height: auto;
border: none;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.list_item_grid a {
text-decoration: none;
}
.list_item_grid .date {
padding: 9px 14px 3px;
color: #7b7b7b;
}
.list_item_grid .txt_link {
margin-top: 0;
padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
text-decoration: none;
color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
content: "NEW"
}
<ul class="list_item_grid clearfix">
<li class="item new">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
</ul>
Link code
I have Completed it, Check out this
Here i added the class name for the paragraphs, then i add some css code.
.list_item_grid {
padding: 0 7px;
margin-bottom: 63px;
list-style: none;
}
.list_item_grid .item {
float: left;
width: calc(100%/4 - 2px);
margin-right: 2px;
margin-bottom: 7px;
}
.list_item_grid .item:last-child {
margin-right: 0;
}
.list_item_grid .thumb_img {
height: 180px;
position: relative;
overflow: hidden;
}
.list_item_grid img {
position: absolute;
width: auto;
max-height: 100%;
height: auto;
border: none;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.list_item_grid a {
text-decoration: none;
}
.list_item_grid .date {
padding: 9px 14px 3px;
color: #7b7b7b;
}
.list_item_grid .txt_link {
margin-top: 0;
padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
text-decoration: none;
color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
content: "NEW"
}
.para{
height: 20px;
margin: 0px;
padding: 15px 0px;
}
<ul class="list_item_grid clearfix">
<li class="item new">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
</ul>
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>
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