smooth transitions

NevroHelios · Oct 15, 2023 · f8ada5d · f8ada5d
1 parent 0c8df56
commit f8ada5d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/index.js b/index.js
@@ -57,6 +57,17 @@ window.onmousedown = (e) => {
     track.dataset.mouseDownAt = e.clientX;
 };
 
+const image = document.querySelector('.image');
+
+image.addEventListener('mouseenter', () => {
+  image.classList.remove('desaturated');
+});
+
+image.addEventListener('mouseleave', () => {
+  image.classList.add('desaturated');
+});
+
+
 window.onmousemove = (e) => {
     if (track.dataset.mouseDownAt === "0") return;
 

diff --git a/style.css b/style.css
@@ -9,6 +9,13 @@
     src: url('pixeboy.ttf');
 }
 
+.image {
+    transition: filter 0.3s ease-in-out;
+}
+.image.desaturated {
+    filter: grayscale(100%);
+}
+
 body {
     min-height: 100vh;
     background-color: rgb(36, 33, 33);