diff --git a/assets/css/main.css b/assets/css/main.css
index 13abb14..e68d005 100644
--- a/assets/css/main.css
+++ b/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 {
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",
diff --git a/index.html b/index.html
index 8b6beca..105ba92 100644
--- a/index.html
+++ b/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>