Carousel image clips over the front clip on mobile on tap/slide (#1078)

* Carousel image: removed transparency on hover for smaller screens

* Changed hover effect to brightness from opacity

* Older iOS can now close image modal

* Disabled filter effect on mobile

* Increased nav z-index from 4 to 5

Co-authored-by: Peter Kos <[email protected]>

Author: ww2497

sass/main.scss

@@ -123,7 +123,7 @@ nav {
     top: 0;
     left: 0;
     right: 0;
-    z-index: 4;
+    z-index: 5;
 
     .left, .right {
         display: flex;
@@ -359,10 +359,10 @@ nav {
                 cursor: pointer;
                 transition: 0.3s;
                 z-index: 2;
-            }
 
-            img:hover {
-                opacity: 0.7;
+                &:hover {
+                    filter: brightness(125%);
+                }
             }
         }
 
@@ -414,9 +414,17 @@ nav {
 
     }
 
+    // Note that older versions of iOS (<14?)
+    // require `cursor: pointer` to be set
+    // in order for click events to be captured
+    // by our intended HTML (here, #modal).
+    // The cursor is reset on the #modal-content,
+    // as on desktop, no action is possible on the image.
+    // https://stackoverflow.com/a/16006333/1431900
     #modal {
         display: none;
         position: fixed;
+        cursor: pointer;
         z-index: 100;
         padding: 100px;
         left: 0;
@@ -437,6 +445,7 @@ nav {
         display: block;
         width: 80%;
         max-width: 700px;
+        cursor: default;
         animation-name: zoom;
         animation-duration: 0.6s;
     }
@@ -1217,6 +1226,10 @@ footer {
                 img {
                     width: $slide-size;
                     height: $slide-size;
+
+                    &:hover {
+                        filter: none;
+                    }
                 }
             }