From ca5b31d94671dc4abcf34011e8a3448e0529f51e Mon Sep 17 00:00:00 2001
From: Jake Howard <jake@theorangeone.net>
Date: Wed, 11 Nov 2015 09:24:44 +0000
Subject: [PATCH] Massive improvement to animation out

---
 static/src/js/components/project-image.js | 19 ++++++++-----------
 static/src/less/style.less                |  9 ++++++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/static/src/js/components/project-image.js b/static/src/js/components/project-image.js
index b15fb8b..ab780bb 100644
--- a/static/src/js/components/project-image.js
+++ b/static/src/js/components/project-image.js
@@ -5,23 +5,20 @@ var Col = ReactBootstrap.Col;
 
 var projectImage = React.createClass({
   render: function () {
-    var contents = this.props.isHovered ? 
-    (
-      <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> 
-      </div>    
-    ) : null;
+    var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
     return (
       <Col sm={4}>
         <div className="wrapper" >
           <div className={"project " + this.props.data.className} 
             onMouseOver={this.props.onHover}
             onMouseLeave={this.props.onLeave} >
-            { contents }            
+            <div className={"animated " + animationClass}>
+              <h4>{this.props.data.title}</h4>
+              <p>{this.props.data.text}</p>
+              <a href={this.props.data.link} className="btn btn-default btn-small">
+                Find out more
+              </a> 
+            </div>     
           </div>
         </div>
       </Col>
diff --git a/static/src/less/style.less b/static/src/less/style.less
index c4707d0..329a0d9 100644
--- a/static/src/less/style.less
+++ b/static/src/less/style.less
@@ -120,13 +120,16 @@ ol , ul{
           } 
 
           & .project {
-            padding: 18px;
+            padding: 25px;
             .transition(~"opacity 0.5s ease-in");
             opacity: 0;
             background-color: rgba(0,0,0,0.6);
 
-            h2 {
-              margin-top: 0;
+            p, a.btn {
+              font-size: 12px;
+            }
+            h4 {
+              font-size: 23px;
             }
           }
         }