From dd378aebf221d74bbeed277ac8b660c66fdb71d5 Mon Sep 17 00:00:00 2001
From: Jeremy Karst <jeremy@karsttech.com>
Date: Wed, 7 Jan 2026 00:43:05 -0500
Subject: [PATCH] Added a background reveal on mouseover feature

---
 assets/css/custom.css                   | 31 +++++++++++++++++
 layouts/partials/background-images.html | 45 ++++++++++++++++++++++++-
 layouts/partials/home/page.html         | 45 ++++++++++++++++++++++++-
 3 files changed, 119 insertions(+), 2 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index c9e8065..ae8e84f 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -46,6 +46,7 @@
   object-fit: cover;
   z-index: 0;
   filter: blur(10px) saturate(0.65);
+  transition: filter 2s ease;
 }
 
 .background-full {
@@ -58,6 +59,36 @@
   filter: blur(4px) saturate(0.65);
 }
 
+.background-image.unblurred {
+  filter: blur(0px) saturate(1) !important;
+}
+
+#cursor-circle {
+  position: fixed;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  z-index: 1;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.7) 100%);
+  transition: opacity 1.0s ease, width 4s ease, height 4s ease;
+}
+
+#cursor-circle.active {
+  opacity: 1;
+  width: 300px;
+  height: 300px;
+}
+
+#cursor-circle.fade-out {
+  opacity: 0;
+  width: 20px;
+  height: 20px;
+  transition: opacity 1.0s ease, width 1s ease, height 1s ease;
+}
+
 /* Lead Styling */
 .prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
   color: rgb(209, 182, 164);
diff --git a/layouts/partials/background-images.html b/layouts/partials/background-images.html
index 6f0862a..38a33c7 100644
--- a/layouts/partials/background-images.html
+++ b/layouts/partials/background-images.html
@@ -5,9 +5,10 @@
   {{ end }}
 {{ end }}
 
-<div class="background-container">
+<div class="background-container" id="bg-container">
   <img id="background-thumb" alt="Background" class="background-image">
   <img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
+  <div id="cursor-circle"></div>
   <script>
     const images = {{ $images }};
     const randomImage = images[Math.floor(Math.random() * images.length)];
@@ -31,5 +32,47 @@
       };
       preloadImg.src = fullPath;
     }, 800);
+
+    const container = document.getElementById('bg-container');
+    const circle = document.getElementById('cursor-circle');
+    let hoverTimer = null;
+    let revealTimer = null;
+    let isRevealed = false;
+
+    container.addEventListener('mousemove', (e) => {
+      if (isRevealed) return;
+      
+      circle.style.left = e.clientX + 'px';
+      circle.style.top = e.clientY + 'px';
+      
+      if (!hoverTimer) {
+        hoverTimer = setTimeout(() => {
+          circle.classList.add('active');
+          revealTimer = setTimeout(() => {
+            circle.classList.remove('active');
+            circle.classList.add('fade-out');
+            fullImg.classList.add('unblurred');
+            isRevealed = true;
+          }, 4000);
+        }, 1000);
+      }
+    });
+
+    const resetEffect = () => {
+      clearTimeout(hoverTimer);
+      clearTimeout(revealTimer);
+      hoverTimer = null;
+      revealTimer = null;
+      circle.classList.remove('active', 'fade-out');
+      fullImg.classList.remove('unblurred');
+      isRevealed = false;
+    };
+
+    container.addEventListener('mouseleave', resetEffect);
+    window.addEventListener('mouseout', (e) => {
+      if (!e.relatedTarget || e.relatedTarget.nodeName === 'HTML') {
+        resetEffect();
+      }
+    });
   </script>
 </div> 
\ No newline at end of file
diff --git a/layouts/partials/home/page.html b/layouts/partials/home/page.html
index d696c03..3ca95fd 100644
--- a/layouts/partials/home/page.html
+++ b/layouts/partials/home/page.html
@@ -1,6 +1,7 @@
-<div class="background-container">
+<div class="background-container" id="bg-container">
   <img id="background-thumb" alt="Background" class="background-image">
   <img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
+  <div id="cursor-circle"></div>
   <script>
     const thumbImg = document.getElementById('background-thumb');
     const fullImg = document.getElementById('background-full');
@@ -23,6 +24,48 @@
       };
       preloadImg.src = fullPath;
     }, 800);
+
+    const container = document.getElementById('bg-container');
+    const circle = document.getElementById('cursor-circle');
+    let hoverTimer = null;
+    let revealTimer = null;
+    let isRevealed = false;
+
+    container.addEventListener('mousemove', (e) => {
+      if (isRevealed) return;
+      
+      circle.style.left = e.clientX + 'px';
+      circle.style.top = e.clientY + 'px';
+      
+      if (!hoverTimer) {
+        hoverTimer = setTimeout(() => {
+          circle.classList.add('active');
+          revealTimer = setTimeout(() => {
+            circle.classList.remove('active');
+            circle.classList.add('fade-out');
+            fullImg.classList.add('unblurred');
+            isRevealed = true;
+          }, 4000);
+        }, 1000);
+      }
+    });
+
+    const resetEffect = () => {
+      clearTimeout(hoverTimer);
+      clearTimeout(revealTimer);
+      hoverTimer = null;
+      revealTimer = null;
+      circle.classList.remove('active', 'fade-out');
+      fullImg.classList.remove('unblurred');
+      isRevealed = false;
+    };
+
+    container.addEventListener('mouseleave', resetEffect);
+    window.addEventListener('mouseout', (e) => {
+      if (!e.relatedTarget || e.relatedTarget.nodeName === 'HTML') {
+        resetEffect();
+      }
+    });
   </script>
 </div>
 <article class="prose max-w-full dark:prose-invert glass">