list grayscale image hover

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 {

public/js/list.js

@@ -146,3 +146,4 @@ import { randFloat } from 'three/src/math/MathUtils.js';
 
 	init()
 
+