Merge pull request #82 from foundersandcoders/portfoliohover

Portfolio card and modal styling

assets/css/main.css

@@ -254,6 +254,7 @@ li ul {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.9);
   color: #e8e8e8;
+  z-index: 20;
 }
 
 #modal div {
@@ -315,6 +316,41 @@ li ul {
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  position: relative;
+}
+
+.portfolio-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: 0.6s ease;
+  background-color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  pointer-events: none; /* This makes the overlay divs unclickable, making the image underneath still clickable */
+}
+
+.portfolio-overlay-text {
+  color: white;
+  font-size: 1.5em;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none; /* This makes the overlay divs unclickable, making the image underneath still clickable */
+}
+
+.portfolio-item:hover .portfolio-overlay {
+  opacity: 1;
 }
 
 .portfolio-item > img {
@@ -324,6 +360,7 @@ li ul {
   -moz-transition: width 0.3s ease-out;
   -o-transition: width 0.3s ease-out;
   transition: width 0.3s ease-out;
+  display: block;
 }
 
 .portfolio-item > img:hover {

assets/js/modal.js

@@ -10,7 +10,7 @@ var modalData = {
     image: "images/portfolio/all-about-me.png",
     url: "https://allaboutme-af.herokuapp.com/",
     description:
-      "All About Me is an app to help young people at The Anna Freud Centre easily transition into adult care.\n\nPatients at The Anna Freud Centre were tired of being asked the same questions every time their clinician changed or they went to a new centre. All About Me allows patients to answer a questionnaire online in their own time, save their answers, and when they're ready they can send their form to their clinician."
+      "All About Me is an app to help young people at The Anna Freud Centre easily transition into adult care. Patients at The Anna Freud Centre were tired of being asked the same questions every time their clinician changed or they went to a new centre. All About Me allows patients to answer a questionnaire online in their own time, save their answers, and when they're ready they can send their form to their clinician."
   },
   "breathe-with-me": {
     title: "Breathe With Me",

index.html

@@ -138,22 +138,40 @@ <h1 id="caption-title"></h1>
 			</div>
 			<div class="grid portfolio-grid">
 				<div class="portfolio-item">
-					<img id="little-window" src='images/littlewindow.png' alt='' onclick="renderModal(this)" />
+					<img id="little-window" src='images/littlewindow.png' alt='' onclick="renderModal(this)"/>
+					<div class="portfolio-overlay">
+						<div class="portfolio-overlay-text">Little Window</div>
+					</div>
 				</div>
 				<div class="portfolio-item">
 					<img id="breathe-with-me" src='images/breath-with-me.png' alt='' onclick="renderModal(this)" />
+					<div class="portfolio-overlay">
+						<div class="portfolio-overlay-text">Breathe with Me</div>
+					</div>
 				</div>
 				<div class="portfolio-item">
 					<img id="courtauld" src='images/courtauld.png' alt='' onclick="renderModal(this)" />
+					<div class="portfolio-overlay">
+						<div class="portfolio-overlay-text">Courtauld Institute of Art</div>
+					</div>
 				</div>
 				<div class="portfolio-item">
 					<img id="all-about-me" src='images/all-about-me.png' alt='test alt text' onclick="renderModal(this)" />
+					<div class="portfolio-overlay">
+						<div class="portfolio-overlay-text">All About Me</div>
+					</div>
 				</div>
 				<div class="portfolio-item">
 					<img id="grow" src='images/grow.png' alt='' onclick="renderModal(this)" />
+					<div class="portfolio-overlay">
+						<div class="portfolio-overlay-text">Grow</div>
+					</div>
 				</div>
 				<div class="portfolio-item">
 					<img id="echo" src='images/echo.png' alt='' onclick="renderModal(this)" />
+					<div class="portfolio-overlay">
+						<div class="portfolio-overlay-text">Echo</div>
+					</div>
 				</div>
 			</div>
 			</div>