Added portfolio image urls and hover text

CareerFoundry · Dec 17, 2019 · 6bb5e86 · 6bb5e86 · Alochukwu · Apr 21, 2020
1 parent 670bdde
commit 6bb5e86
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -38,10 +38,22 @@ <h3>I like to</h3>
 		<div>
 			<h3 class="projects-heading">My Projects</h3>
 			<div class="projects-grid">
-				<img class="project-image" src="images/project-1.jpg"/>
-				<img class="project-image" src="images/project-2.jpg"/>
-				<img class="project-image" src="images/project-3.jpg"/>
-				<img class="project-image" src="images/project-4.jpg"/>
+				<div class="project-image-wrapper">
+					<h4>Project 1</h4>
+					<img class="project-image" src="images/project-1.jpg"/>
+				</div>
+				<div class="project-image-wrapper">
+					<h4>Project 2</h4>
+					<img class="project-image" src="images/project-2.jpg"/>
+				</div>
+				<div class="project-image-wrapper">
+					<h4>Project 3</h4>
+					<img class="project-image" src="images/project-3.jpg"/>
+				</div>
+				<div class="project-image-wrapper">
+					<h4>Project 4</h4>
+					<img class="project-image" src="images/project-4.jpg"/>
+				</div>
 			</div>
 		</div>
 

diff --git a/style.css b/style.css
@@ -44,8 +44,35 @@ h1, h2, h3, h4 {
 }
 
 .project-image {
+	border-radius: 5px;
+	box-shadow: 0 4px 6px 0 rgba(34, 60, 80, .16);
+	transition: all ease-in-out .2s;
+}
+
+.project-image:hover {
+	filter: brightness(.75);
+	box-shadow: 0 8px 12px 0 rgba(34, 60, 80, .16);
+}
+
+.project-image-wrapper {
 	justify-self: center;
 	padding: 4%;
+	position: relative;
+}
+
+.project-image-wrapper:hover > h4 {
+	visibility: visible;
+}
+
+.project-image-wrapper > h4 {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: white;
+	visibility: hidden;
+	z-index: 2;
+	transition: all ease-in-out .2s;
 }
 
 .links-and-contact {