diff --git a/src/layouts/all.sass b/src/layouts/all.sass
index cc1c499..8416c1e 100644
--- a/src/layouts/all.sass
+++ b/src/layouts/all.sass
@@ -1,7 +1,7 @@
 @import "../components/_variables.sass"
 
 // Import a Google Font
-@import url('https://fonts.googleapis.com/css?family=Archivo+Black|Montserrat');
+@import url('https://fonts.googleapis.com/css?family=Archivo+Black|Montserrat:300,400,500');
 
 ////////////////////////////////////////////////
 // CYBORG
diff --git a/src/pages/crew/index.js b/src/pages/crew/index.js
index 2977511..993cd58 100644
--- a/src/pages/crew/index.js
+++ b/src/pages/crew/index.js
@@ -24,6 +24,7 @@ export default class CrewOverviewPage extends React.Component {
                   { mq: '768px', columns: 2, gutter: 15 },
                   { mq: '1024px', columns: 3, gutter: 25 },
                 ]}
+                className={styles.layout}
               >
                 {posts.map(({ node: post }, i) => {
                   let height = i % 2 === 0 ? 200 : 100
@@ -31,20 +32,27 @@ export default class CrewOverviewPage extends React.Component {
                     <Link
                       key={post.id}
                       className={styles.crew}
-                      style={{
-                        height: `${height}px`,
-                        lineHeight: `${height}px`,
-                        color: 'white',
-                        fontSize: '32px',
-                        display: 'block',
-                        background: 'rgba(0,0,0,0.7)',
-                      }}
                       to={post.fields.slug}
                     >
-                      <Img {...post.frontmatter.image.childImageSharp} />
-                      <h5>
-                        <span>{post.frontmatter.title}</span>
-                      </h5>
+                      <div
+                        className={styles.card}
+                        style={{
+                          height: `${height}px`,
+                          lineHeight: `${height}px`,
+                          color: 'white',
+                          fontSize: '32px',
+                          display: 'block',
+                          background: 'rgba(0,0,0,0.7)',
+                        }}
+                      >
+                        <h5>{this.renderTitle(post.frontmatter.title)}</h5>
+                        <div>
+                          <Img
+                            {...post.frontmatter.image.childImageSharp}
+                            styles={{ width: 'inherit' }}
+                          />
+                        </div>
+                      </div>
                     </Link>
                   )
                 })}
@@ -55,6 +63,11 @@ export default class CrewOverviewPage extends React.Component {
       </section>
     )
   }
+
+  renderTitle = title => {
+    const parts = title.split(' ')
+    return parts.map((p, i) => <span key={`title-part-${i}`}>{p}</span>)
+  }
 }
 
 CrewOverviewPage.propTypes = {
@@ -89,8 +102,8 @@ export const crewOverviewQuery = graphql`
             date(formatString: "MMMM DD, YYYY")
             image {
               childImageSharp {
-                fluid(maxWidth: 900) {
-                  ...GatsbyImageSharpFluid_withWebp
+                fixed(width: 500, height: 500) {
+                  ...GatsbyImageSharpFixed
                 }
               }
             }
diff --git a/src/pages/crew/styles.module.scss b/src/pages/crew/styles.module.scss
index dc7095c..2e12382 100644
--- a/src/pages/crew/styles.module.scss
+++ b/src/pages/crew/styles.module.scss
@@ -11,6 +11,7 @@
   width: 48.5%;
   display: block;
   position: relative;
+  perspective: 1400px;
 
   @include from($tablet) {
     width: 33.334%;
@@ -20,25 +21,45 @@
     height: 100%;
   }
 
+  &:hover {
+    h5 {
+      transform: translate3d(-50%, 30%, 140px) rotateZ(0deg);
+
+      &::after {
+        background: $purple;
+      }
+    }
+  }
+
   h5 {
     position: absolute;
-    bottom: 0;
-    left: 0;
+    top: 50%;
+    left: 50%;
     color: $light;
     font-size: 1.2rem;
     margin: 0;
     letter-spacing: 1px;
     text-transform: uppercase;
+    padding: 6px;
+    transition: all 0.4s;
+    z-index: 101;
+    transform: translate3d(-50%, -50%, 0) rotateZ(-5deg);
 
     @include from($tablet) {
-      font-size: 1.7rem;
+      font-size: 1.3rem;
     }
 
     span {
+      font-weight: 600;
       position: relative;
       z-index: 2;
     }
 
+    span + span {
+      font-weight: 300;
+      margin-left: 6px;
+    }
+
     &::after {
       content: '';
       display: block;
@@ -47,8 +68,93 @@
       left: 0;
       width: 100%;
       height: 100%;
+      transition: all 0.4s;
       background: rgba($dark, 0.7);
       z-index: 1;
     }
   }
 }
+
+.layout {
+  position: relative;
+}
+
+.card {
+  transform: rotateY(15deg) rotateX(3deg);
+  transform-style: preserve-3d;
+  transition: all 0.4s;
+
+  &:hover {
+    transform: rotateY(0deg) rotateX(5deg);
+
+    &::after {
+      background: linear-gradient(
+        rgba(lighten($dark, 45%), 0.1),
+        rgba(lighten($dark, 55%), 0.1)
+      );
+    }
+
+    > div {
+      &::after {
+        opacity: 0;
+      }
+    }
+  }
+
+  > div {
+    overflow: hidden;
+    width: inherit;
+    height: inherit;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      background: linear-gradient(
+        rgba(darken($light, 15%), 0.9),
+        rgba(darken($light, 25%), 1)
+      );
+      width: 100%;
+      height: 100%;
+      mix-blend-mode: color;
+    }
+  }
+
+  > div > div {
+    max-width: 100%;
+  }
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    background: linear-gradient(
+      rgba(lighten($dark, 25%), 0.5),
+      rgba(lighten($dark, 35%), 0.7)
+    );
+  }
+
+  &::before {
+    width: 80px;
+    height: 100%;
+    transform: rotateY(90deg);
+    transform-origin: left;
+  }
+
+  &::after {
+    background: linear-gradient(
+      rgba(lighten($dark, 45%), 0.5),
+      rgba(lighten($dark, 55%), 0.7)
+    );
+    width: 100%;
+    height: 80px;
+    transform: rotateX(90deg);
+    transform-origin: bottom;
+    transition: all 0.4s;
+    backface-visibility: hidden;
+  }
+}