tweaks (not done)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

css/grid-n-view.css

@@ -76,6 +76,8 @@ body {
 
 /* XXX need to account for scrollbar popping in and out */
 .gallery {
+	--base-layer: 10;
+
 	padding-top: var(--gallery-padding-top);
 	padding-bottom: var(--gallery-padding-bottom);
 	padding-left: calc(
@@ -109,21 +111,38 @@ body {
 
 /* selection marker... */
 .gallery .images img.current {
-	z-index: 1;
+	z-index: 10;
 	box-shadow: 
 		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
 		0.4em 0.4em 3em 0em rgba(0,0,0,0.8);
 }
 
+/* hover... */
+/* XXX Problems:
+	- this hides marks... 
+	- shown over lightbox...
+*/
+.gallery .images img:not(.current):hover {
+	z-index: 20;
+	box-shadow: 0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
+}
+.gallery .images img.current:hover {
+	z-index: 20;
+	box-shadow: 
+		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
+		0.6em 0.6em 4em 0em rgba(0,0,0,0.8);
+}
+
+
 
 /*************************************************** Image markers ***/
 
 .gallery .images img+.mark {
-	z-index: 1;
+	z-index: var(--base-layer);
 	position: relative;
 }
 .gallery.lightboxed .images img.current+.mark {
-	z-index: 2;
+	z-index: calc(var(--base-layer) + 10);
 	position: fixed;
 	bottom: 0;
 	right: 0;
@@ -152,13 +171,15 @@ body {
 /******************************************************* Lightbox ****/
 
 .gallery .lightbox {
+	--base-layer: 100;
+
 	display: none;
 	position: fixed;
 	width: 100%;
 	height: 100%;
 	top: 0px;
 	left: 0px;
-	z-index: 1;
+	z-index: var(--base-layer);
 
 	text-align: center;
 

grid-n-view.html

@@ -20,6 +20,7 @@
 
 <h3>ToDo</h3>
 <pre>
+- <b>ASAP: CSS: z-index needs fixing...</b>
 - Views:
 	- <s>Gallery</s>
 	- <b>Details</b>