Fixed project image triplet

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}>

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: "",
   }
 ];

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;
+            }
           }
         }
       }