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() +