From f14b7f7ff94c29079a422694859ddcc4875b73b5 Mon Sep 17 00:00:00 2001
From: Jake Howard <jake@theorangeone.net>
Date: Wed, 11 Nov 2015 08:51:50 +0000
Subject: [PATCH] Fixed project image triplet

---
 static/src/js/components/project-image.js  |  4 ++--
 static/src/js/components/project-images.js |  6 +++---
 static/src/less/style.less                 | 15 +++++++++++----
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/static/src/js/components/project-image.js b/static/src/js/components/project-image.js
index 60d0f09..b15fb8b 100644
--- a/static/src/js/components/project-image.js
+++ b/static/src/js/components/project-image.js
@@ -7,13 +7,13 @@ var projectImage = React.createClass({
   render: function () {
     var contents = this.props.isHovered ? 
     (
-      <span>
+      <div className="animated zoomIn">
         <h4>{this.props.data.title}</h4>
         <p>{this.props.data.text}</p>
         <a href={this.props.data.link} className="btn btn-default">
           Find out more
         </a> 
-      </span>    
+      </div>    
     ) : null;
     return (
       <Col sm={4}>
diff --git a/static/src/js/components/project-images.js b/static/src/js/components/project-images.js
index 6d04918..db4d68a 100644
--- a/static/src/js/components/project-images.js
+++ b/static/src/js/components/project-images.js
@@ -7,19 +7,19 @@ const DATA = [
   {
     className: "",
     title: "College",
-    text: "",
+    text: "Some College Stuff",
     link: "",
   },
   {
     className: "",
     title: "Personal",
-    text: "",
+    text: "Some Personal Stuff",
     link: "",
   },
   {
     className: "",
     title: "Work",
-    text: "",
+    text: "Some Work Stuff",
     link: "",
   }
 ];
diff --git a/static/src/less/style.less b/static/src/less/style.less
index 864fc7a..c4707d0 100644
--- a/static/src/less/style.less
+++ b/static/src/less/style.less
@@ -111,16 +111,23 @@ ol , ul{
         }
 
         .wrapper {
-          background-color: black;
           color: white;
           margin: 0 auto;
+          background-color: red;
 
           &:hover .project {
-            opacity: 0.6;
-          }
+            opacity: 1;
+          } 
 
           & .project {
-            opacity: 1;
+            padding: 18px;
+            .transition(~"opacity 0.5s ease-in");
+            opacity: 0;
+            background-color: rgba(0,0,0,0.6);
+
+            h2 {
+              margin-top: 0;
+            }
           }
         }
       }