chaning imgs to divs

dxa4481 · Sep 24, 2015 · 30366b1 · 30366b1
1 parent 19e7bb2
commit 30366b1
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 13 deletions.
diff --git a/css/main.css b/css/main.css
@@ -47,15 +47,48 @@
 }
 
 .linksPage{
-	height: 100%;
-	width: 100%;
 }
 
-.images{
+.image1{
+	background: rgba(0,0,0,0) url('../pics/proximity.png');
+	display: block;
+	height: 50%;
+	margin-left: auto;
+	margin-right: auto;
+	background-size:cover;
+}
+
+.image2{
+	background: rgba(0,0,0,0) url('../pics/esp8266.jpg');
+	display: block;
+	height: 50%;
+	margin-left: auto;
+	margin-right: auto;
+	background-size:cover;
+}
+
+.image3{
+	background: rgba(0,0,0,0) url('../pics/atmega328.jpg');
+	display: block;
+	height: 50%;
+	margin-left: auto;
+	margin-right: auto;
+	background-size:cover;
+}
+
+.image4{
+	background: rgba(0,0,0,0) url('../pics/motor.png');
 	height: 50%;
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
+	background-size:cover;
 }
 
 
+.imageOverlay:before{
+	background-color: inherit;
+}
+.imageOverlay:hover{
+	background-color: rgba(120,120,120,0.5)
+}
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
 	<body>
 		<div class="frontBanner">
 			<div class="titleCard">
+				<span class="ripple"></span>
 				<div class="title">Veyebrations</div>
 				<div class="names"> <a class="names" href="https://github.com/Aether357">Josh</a> | <a class="names" href="https://github.com/dxa4481">Dylan</a> | <a class="names" href="https://github.com/rayrobdod">Raymond</a></div>
 
@@ -15,18 +16,22 @@
 			</div>
 		</div>
 		<div class="linksPage">
-			<div class="six columns">
-				<img class="images" src="pics/proximity.png"></img>
+			<div class="row">
+				<div class="six columns">
+					<div class="imageOverlay image1"></div>
+				</div>
+				<div class="six columns">
+					<div class="imageOverlay image2"></div>
+				</div>
 			</div>
-			<div class="six columns">
-				<img class="images" src="pics/pcb.png"></img>
+			<div class="row">
+				<div class="six columns">
+					<div class="imageOverlay image3"></div>
+				</div>	
+				<div class="six columns">
+					<div class="imageOverlay image4"></div>
+				</div>		
 			</div>
-			<div class="six columns">
-				<img class="images" src="pics/esp8266.jpg"></img>
-			</div>
-			<div class="six columns">
-				<img class="images" src="pics/atmega328.jpg"></img>
-			</div>		
 		</div>
 	</body>
 

diff --git a/pics/motor.png b/pics/motor.png
diff --git a/pics/pcb.png b/pics/pcb.png