From 2aa6d89fdd5ac274fbdaed2bc45c35875343d305 Mon Sep 17 00:00:00 2001
From: Kate Beard <asouthernbellein@gmail.com>
Date: Mon, 30 Jul 2018 17:14:15 +0100
Subject: [PATCH 1/3] Add color and text overlay to portfolio cards on hover

---
 assets/css/main.css | 35 +++++++++++++++++++++++++++++++++++
 index.html          | 20 +++++++++++++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index cfa42fd..63f9fe5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -244,6 +244,7 @@ main > section {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.9);
   color: #e8e8e8;
+  z-index: 20;
 }
 
 #modal div {
@@ -305,6 +306,39 @@ main > section {
   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: .5s 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%);
+  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 {
@@ -314,6 +348,7 @@ main > section {
   -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 {
diff --git a/index.html b/index.html
index cd7e3ab..dd7178f 100644
--- a/index.html
+++ b/index.html
@@ -99,22 +99,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>

From f4e05ab20f9157c1d73fd3df187f67cd42ad3a6c Mon Sep 17 00:00:00 2001
From: Kate Beard <asouthernbellein@gmail.com>
Date: Mon, 30 Jul 2018 17:14:53 +0100
Subject: [PATCH 2/3] Remove new line returns from Anne Freud modal. Text
 looked weird.

---
 assets/js/modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/modal.js b/assets/js/modal.js
index f0657f8..444d9b0 100644
--- a/assets/js/modal.js
+++ b/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",

From 4a0e3668938e42dd04bafab305215c2a6d9b6795 Mon Sep 17 00:00:00 2001
From: Kate Beard <asouthernbellein@gmail.com>
Date: Mon, 30 Jul 2018 20:00:31 +0100
Subject: [PATCH 3/3] Fix -o-transform and -moz-transform for
 .portfolio-overlay-text

---
 assets/css/main.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 63f9fe5..74d6db2 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -318,7 +318,7 @@ main > section {
   height: 100%;
   width: 100%;
   opacity: 0;
-  transition: .5s ease;
+  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 */
@@ -332,6 +332,8 @@ main > section {
   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 */