project image style fixes

src/components/molecules/ProjectImage.jsx

@@ -6,8 +6,7 @@ import styles from './ProjectImage.module.scss'
 
 const ProjectImage = ({ fluid, alt }) => (
   <Img
-    className={styles.project__image}
-    outerWrapperClassName={styles.project__imagewrap}
+    className={styles.projectImage}
     backgroundColor="#6b7f88"
     fluid={fluid}
     alt={alt}

src/components/molecules/ProjectImage.module.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
-.project__imagewrap {
+.projectImage {
     max-height: 100vh;
     margin-left: auto;
     margin-right: auto;
@@ -18,9 +18,7 @@
         box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
             0 5px 16px rgba(darken($brand-main, 20%), .15);
     }
-}
 
-.project__image {
     img {
         max-height: 100vh;
         display: block;

src/pages/index.module.scss

@@ -11,6 +11,21 @@
     }
 }
 
+.title {
+    font-size: $font-size-h4;
+    opacity: 0;
+    position: absolute;
+    top: 10%;
+    left: 0;
+    margin: 0;
+    z-index: 2;
+    padding: $spacer / 3 $spacer;
+    background: rgba($brand-cyan, .9);
+    color: #fff;
+    transform: translate3d(0, -2rem, 0);
+    transition: transform .15s ease-out;
+}
+
 .project {
     flex: 0 0 calc(50% - #{$spacer});
     text-align: center;
@@ -39,7 +54,7 @@
             bottom: 0;
             z-index: 1;
             background: transparent;
-            transition: background .2s ease-out;
+            transition: background .15s ease-out;
         }
 
         &:hover,
@@ -47,14 +62,11 @@
             &::after {
                 background: rgba($brand-cyan, .05);
             }
+
+            .title {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
         }
     }
 }
-
-.title {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0;
-}