From 6b8ff4855961680dbbd31703e0a533c4aa66f2ad Mon Sep 17 00:00:00 2001
From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com>
Date: Tue, 25 May 2021 21:57:19 +0100
Subject: [PATCH] Refined color overlays

---
 main.css        | 1 +
 scripts/main.js | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/main.css b/main.css
index 6b06065..5452565 100644
--- a/main.css
+++ b/main.css
@@ -358,6 +358,7 @@ section.hero-section {
     top: 0;
     left: 0;
     transition: all .3s ease-out;
+    z-index: 100;
 }
 
 
diff --git a/scripts/main.js b/scripts/main.js
index 291a14d..2dae967 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -47,19 +47,20 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
 });
 
 document.getElementById("ui-ux-design").addEventListener("mouseover", () => {
-    document.getElementById("color-overlay").style.backgroundColor = "#A5E6BA";
+    
+    setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#A5E6BA";}, 400);
 });
 
 document.getElementById("web-design").addEventListener("mouseover", () => {
-    document.getElementById("color-overlay").style.backgroundColor = "#5B2A86";
+    setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#5B2A86";}, 400);    
 });
 
 document.getElementById("frontend-dev").addEventListener("mouseover", () => {
-    document.getElementById("color-overlay").style.backgroundColor = "#7785AC";
+    setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#7785AC";}, 400);    
 });
 
 document.getElementById("graphic-design").addEventListener("mouseover", () => {
-    document.getElementById("color-overlay").style.backgroundColor = "#9AC6C5";
+    setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#9AC6C5";}, 400);    
 });