zooming

site.css

@@ -124,13 +124,14 @@ a:hover {
     height: 100%;
     display: flex;
     align-items: center;
+    position: relative;
+    touch-action: none;
 }
 
 .BigPicture-track {
     display: flex;
     align-items: center;
     height: 100%;
-    touch-action: pan-y;
     will-change: transform;
 }
 
@@ -145,13 +146,24 @@ a:hover {
     max-width: 100%;
     padding: 20px;
     width: 100%;
-    touch-action: pan-y;
 }
 
 .BigPicture-frame.is-dragging {
     cursor: grabbing;
 }
 
+.BigPicture-imageWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    will-change: transform;
+}
+
+.BigPicture-zoomTarget {
+    transition: transform 0.2s ease;
+    will-change: transform;
+}
+
 .BigPicture img {
     transition-duration: 0.2s;
     transition-timing-function: ease-in-out;
@@ -163,6 +175,7 @@ a:hover {
     display: flex;
     flex: 0 0 auto;
     justify-content: space-between;
+    margin-bottom: 8px;
     max-width: 200px;
     width: 100%;
 }