From bf3c657b7cb568720961ec869b3b06d595cf88ea Mon Sep 17 00:00:00 2001
From: Cailean Finn <Caileannn@gmail.com>
Date: Wed, 26 Jun 2024 19:21:56 +0100
Subject: [PATCH] list grayscale image hover

---
 public/css/styles.css | 7 +++++++
 public/js/list.js     | 1 +
 2 files changed, 8 insertions(+)

diff --git a/public/css/styles.css b/public/css/styles.css
index fc0e0e3..f7de759 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -169,6 +169,12 @@ hr {
     position: absolute;
     top: 0;
     left: 0;
+	filter: grayscale(50%);
+    transition: filter 0.5s ease-in-out;
+}
+
+.list-image img:hover {
+    filter: grayscale(0%);
 }
 
 .list-image-overlay {
@@ -176,6 +182,7 @@ hr {
     width: calc(100% + .2rem);
     height: 100%;
     box-shadow: 0 0 .25rem .5rem white inset;
+	pointer-events: none;
 }
 
 .list-title {
diff --git a/public/js/list.js b/public/js/list.js
index 89f077a..c29b2c8 100644
--- a/public/js/list.js
+++ b/public/js/list.js
@@ -146,3 +146,4 @@ import { randFloat } from 'three/src/math/MathUtils.js';
 
 	init()
 
+