From 43eaa49ddbff7feaef2e5b25a4594c192e0d6fce Mon Sep 17 00:00:00 2001
From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com>
Date: Tue, 25 May 2021 21:49:37 +0100
Subject: [PATCH] Add color overlay to animation block

---
 index.html      |  5 ++++-
 main.css        | 19 +++++++++++++++----
 scripts/main.js | 18 +++++++++++++++++-
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 05fa790..3237af2 100644
--- a/index.html
+++ b/index.html
@@ -68,7 +68,10 @@
             </div>
             
             <div class="column-50 centered-content" style="perspective:600px;z-index:-1;">
-                <div class="face-wrapper" id="my-face-wrapper"><div id="my-face"></div></div>
+                <div class="face-wrapper" id="my-face-wrapper">
+                    <div id="my-face"></div>
+                    <div id="color-overlay"></div>
+                </div>
             </div>
         </div>
     </section>
diff --git a/main.css b/main.css
index 79f3799..6b06065 100644
--- a/main.css
+++ b/main.css
@@ -205,6 +205,7 @@ section.hero-section {
 .hero-content-link {
     color: #888;
     transition: all .3s ease-out;
+    border-bottom: 2px solid #aaa;
 }
 
 .hero-content-link:hover {
@@ -273,7 +274,7 @@ section.hero-section {
     border: none;
     display: flex;
     justify-content: flex-start;
-    margin-right: 10px;
+    margin-right: 20px;
 }
 
 .linkedin-link:hover {
@@ -349,6 +350,16 @@ section.hero-section {
     margin: 0;
 }
 
+#color-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    top: 0;
+    left: 0;
+    transition: all .3s ease-out;
+}
+
 
 
 
@@ -420,11 +431,12 @@ section.hero-section {
     }       
     
     #my-face {
-        right: -20vw;
+        
     }
     
     .face-wrapper {
         margin-top: -10vw;
+        right: -20vw;
     }
     
 }
@@ -471,16 +483,15 @@ section.hero-section {
     }
     
     #my-face {
-        right: -60vw;
         margin-top: 0;
     }
     
     .face-wrapper {
         top: 0;
-        right: 0;
         width: auto;
         height: auto;
         margin-top: -65vh;
+        right: -60vw;
     }
     
 }
diff --git a/scripts/main.js b/scripts/main.js
index 579ddc4..291a14d 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -46,6 +46,22 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
    }); 
 });
 
+document.getElementById("ui-ux-design").addEventListener("mouseover", () => {
+    document.getElementById("color-overlay").style.backgroundColor = "#A5E6BA";
+});
+
+document.getElementById("web-design").addEventListener("mouseover", () => {
+    document.getElementById("color-overlay").style.backgroundColor = "#5B2A86";
+});
+
+document.getElementById("frontend-dev").addEventListener("mouseover", () => {
+    document.getElementById("color-overlay").style.backgroundColor = "#7785AC";
+});
+
+document.getElementById("graphic-design").addEventListener("mouseover", () => {
+    document.getElementById("color-overlay").style.backgroundColor = "#9AC6C5";
+});
+
 
 //--------------------------------------------------------------------------- Services mouseout
 document.querySelectorAll(".hero-content-link").forEach(item => {
@@ -55,10 +71,10 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
            
            steadyState();
            faceWrapper.style.transform = "none";
+           document.getElementById("color-overlay").style.backgroundColor = "transparent";
                                         
        }, 500);
        
-       
    }); 
 });