Add color overlay to animation block

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>

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

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