Create photo grid items

src/Grid.css

@@ -102,6 +102,50 @@
 	font-family: monospace;
 }
 
+.photo a {
+	display: block;
+	position: relative;
+	height: 100%;
+}
+
+.photo header, .photo footer {
+	display: none;
+	position: absolute;
+	width: 100%;
+	z-index: 2;
+
+	background: rgba(0, 0, 0, 0.4);
+	color: white;
+}
+
+.photo header {
+	top: 0;
+	font-size: 1.5rem;
+	padding: 0.5rem;
+}
+
+.photo footer {
+	bottom: 0;
+	justify-content: space-between;
+	padding: 0 1em;
+	font-size: 1rem;
+	font-family: monospace;
+}
+
+.photo a:hover header {
+	display: block;
+}
+
+.photo a:hover footer {
+	display: flex;
+}
+
+.photo img {
+	position: absolute;
+	height: 100%;
+	left: 0;
+}
+
 @media all and (max-width: 120rem) {
 	.grid-item {
 		width: 25%;
@@ -133,5 +177,15 @@
 	.grid-item {
 		width: 100%;
 		padding-bottom: 100%;
+		margin-bottom: 1rem;
+	}
+	.grid-item-content.photo {
+		padding: 0;
+	}
+	.photo a header {
+		display: block;
+	}
+	.photo a footer {
+		display: flex;
 	}
 }

src/Grid.js

@@ -10,6 +10,11 @@ import switch1 from './switch1.jpg';
 import pump1 from './pump1.jpg';
 import hand1 from './hand1.jpg';
 
+import banff1 from './banff1.jpg';
+import bee1 from './bee1.jpg';
+import canmore1 from './canmore1.jpg';
+import carshow1 from './carshow1.jpg';
+
 //function importAll(r) {
 //    return r.keys().map(x => r(x));
 //}
@@ -22,9 +27,9 @@ class Grid extends React.Component {
 		return (
 			<div className='grid-container'>
 				<GridItem type='menu'>
-					<img src={logo} className='logo' alt='Tanner Collin signature' />
+					<img src={logo} className='logo' alt='' />
 					<section>
-						<img src={tanner} alt='Tanner' />
+						<img src={tanner} alt='' />
 						<aside>
 							<p>Home</p>
 							<p>Projects</p>
@@ -39,47 +44,79 @@ class Grid extends React.Component {
 				<GridItem type='project left'>
 					<header>LED Dress</header>
 					<section>
-						<img src={dress1} alt='LED Dress thumbnail' />
+						<img src={dress1} alt='' />
 						<p>A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.</p>
 					</section>
 					<footer>
-						<p>Project (Hardware)</p>
-						<p>2018-10-11</p>
+						<p>Project (Hardware)</p><p>2018-10-11</p>
 					</footer>
 				</GridItem>
+				<GridItem type='photo'>
+					<a>
+						<header>Thorncliffe Car Show</header>
+						<img src={carshow1} alt='' />
+						<footer>
+							<p>Photography</p><p>2018-10-11</p>
+						</footer>
+					</a>
+				</GridItem>
 				<GridItem type='project bottom'>
 					<header>Remote Control Lightswitch</header>
 					<section>
-						<img src={switch1} alt='Lightswitch thumbnail' />
+						<img src={switch1} alt='' />
 						<p>Custom circuit that lets me control a ceiling light over Wifi.</p>
 					</section>
 					<footer>
-						<p>Project (Hardware)</p>
-						<p>2018-10-11</p>
+						<p>Project (Hardware)</p><p>2018-10-11</p>
 					</footer>
 				</GridItem>
 				<GridItem type='project bottom'>
 					<header>Plant Waterer</header>
 					<section>
-						<img src={pump1} alt='Plant Waterer thumbnail' />
+						<img src={pump1} alt='' />
 						<p>Controller that waters my plant automatically every day.</p>
 					</section>
 					<footer>
-						<p>Project (Hardware)</p>
-						<p>2018-10-11</p>
+						<p>Project (Hardware)</p><p>2018-10-11</p>
 					</footer>
 				</GridItem>
+				<GridItem type='photo'>
+					<a>
+						<header>Prince's Island Park</header>
+						<img src={bee1} alt='' />
+						<footer>
+							<p>Photography</p><p>2018-10-11</p>
+						</footer>
+					</a>
+				</GridItem>
+				<GridItem type='photo'>
+					<a>
+						<header>Johnston Creek, Banff</header>
+						<img src={banff1} alt='' />
+						<footer>
+							<p>Photography</p><p>2018-10-11</p>
+						</footer>
+					</a>
+				</GridItem>
 				<GridItem type='project left'>
 					<header>Hand of Ozymandias</header>
 					<section>
-						<img src={hand1} alt='Metal Hand thumbnail' />
+						<img src={hand1} alt='' />
 						<p>Sculpture welded together out of scrap metal for practice.</p>
 					</section>
 					<footer>
-						<p>Project (Hardware)</p>
-						<p>2018-10-11</p>
+						<p>Project (Hardware)</p><p>2018-10-11</p>
 					</footer>
 				</GridItem>
+				<GridItem type='photo'>
+					<a>
+						<header>VW Van in Canmore</header>
+						<img src={canmore1} alt='' />
+						<footer>
+							<p>Photography</p><p>2018-10-11</p>
+						</footer>
+					</a>
+				</GridItem>
 			</div>
 		);
 	}