diff --git a/components/Book/Sidenote.tsx b/components/Book/Sidenote.tsx
index eafd283..12c810b 100644
--- a/components/Book/Sidenote.tsx
+++ b/components/Book/Sidenote.tsx
@@ -126,13 +126,32 @@ export const ExpandingSideImg = ({src, alt, retina, caption, children}: {
 }) => {
   const ref = useSidenoteRegistration();
 
-  return <div className="expanding-side-img" ref={ref}>
+  return <div className="expanding-side-img-container">
+    <div className="expanding-side-img" ref={ref}>
     <Image
       src={src}
       alt={alt || caption || "image"}
       className={retina ? " retina" : ""}
     />
-    {caption && <div className={"caption" + (children ? " with-children" : " no-children")}>{caption}</div>}
-    {children && <div className="children">{children}</div>}
+    <div className="caption-cont">
+      {caption && <div className={"caption" + (children ? " with-children" : " no-children")}>{caption}</div>}
+      {children && <div className="children">{children}</div>}
+    </div>
+    </div>
+    <div className="overlay">
+      <div className="figure">
+      <Image
+        src={src}
+        alt={alt || caption || "image"}
+        className={retina ? " retina" : ""}
+      />
+      {(caption || children) &&
+        <div className="caption-cont">
+          {caption && <div className={"caption" + (children ? " with-children" : " no-children")}>{caption}</div>}
+          {children && <div className="children">{children}</div>}
+        </div>
+      }
+      </div>
+    </div>
   </div>
 }
diff --git a/public/icons/eye.svg b/public/icons/eye.svg
new file mode 100644
index 0000000..ac535e6
--- /dev/null
+++ b/public/icons/eye.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 20 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,0,-2.905036)">
+        <path d="M0,10C5.666,19.46 14.334,19.46 20,10C14.334,0.54 5.666,0.54 0,10M14.4,10C14.373,12.45 12.35,14.45 9.9,14.45C7.432,14.45 5.4,12.419 5.4,9.95C5.4,7.481 7.432,5.45 9.9,5.45C12.35,5.45 14.373,7.45 14.4,9.9L14.4,10ZM12.4,10C12.373,8.703 11.298,7.65 10.001,7.65C8.684,7.65 7.601,8.733 7.601,10.05C7.601,11.367 8.684,12.45 10.001,12.45C11.298,12.45 12.373,11.397 12.4,10.1L12.4,10Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+</svg>
diff --git a/public/icons/magnifying-glass.svg b/public/icons/magnifying-glass.svg
new file mode 100644
index 0000000..a17cc84
--- /dev/null
+++ b/public/icons/magnifying-glass.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 652 654" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;">
+    <g transform="matrix(1,0,0,1,83.198804,83.198804)">
+        <path d="M280,278C308.073,249.403 323.817,210.891 323.817,170.817C323.817,86.884 254.751,17.817 170.817,17.817C86.884,17.817 17.817,86.884 17.817,170.817C17.817,254.751 86.884,323.817 170.817,323.817C210.891,323.817 249.403,308.073 278,280L448,450M357,333L467,443L441,469L331,359" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:49px;"/>
+    </g>
+</svg>
diff --git a/styles/globals.scss b/styles/globals.scss
index 1bd3486..b379e40 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -88,7 +88,7 @@ $gap: var(--gap);
     transform: translateX(calc(-100% - $gap));
 
     img {
-      margin-top: 8px !important;
+      margin-top: 8px;
       margin-bottom: 8px !important;
     }
 
@@ -112,70 +112,162 @@ $gap: var(--gap);
 
   div.expanding-side-img {
     transform-origin: top left;
-    position: relative;
-    animation: toAbsolute 0.5s forwards;
     max-width: $aside-width;
     padding: 0;
     object-fit: contain;
 
-    @keyframes toAbsolute {
-      0% { position: relative; }
-      100% { position: absolute; }
-    }
-
     img {
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
+      border-radius: 5px;
     }
 
     img.retina {
       zoom: 0.5;
     }
 
-    .children {
+    &::after {
+      content: "";
+      position: absolute;
+      top: 8px;
+      right: 0;
+      width: 32px;
+      height: 32px;
+
+      background-color: rgb(80 80 80 / 70%);
+      background-image: url("/icons/magnifying-glass.svg");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 18px;
+
+      border-radius: 4px;
+    }
+
+    .caption-cont .children {
       display: -webkit-box;
-      -webkit-line-clamp: 2;   // number of lines
+      -webkit-line-clamp: 2; // number of lines
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+  }
+}
 
-    &:hover {
-      position: relative;
-      width: $prose-width;
-      max-width: min($prose-width, calc(100vw - 4rem));
-      transform-origin: top left;
-      animation: none;
-      transition:
-              width 0.5s,
-              max-width 0.5s;
-      z-index: 100;
-      transform: translateX(calc(0px - $aside-width - $gap));
-      background-color: #eee;
-      border-radius: 4px;
+div.expanding-side-img-container div.overlay {
+  visibility: hidden;
 
-      img {
-        max-width: $prose-width;
-        transition: all 0.5s;
-      }
+  position: fixed;
+  top: 50% !important;
+  left: 50% !important;
+  width: 10vw;
+  height: 10vh;
+  transition: width 0.2s, height 0.2s;
+  transform: translate(-50%, -50%);
 
-      .caption.no-children, .children {
-        padding: 16px;
-      }
+  text-align: center;
+  z-index: 100;
 
-      .caption.with-children {
-        padding: 16px 16px 0 16px;
-        font-weight: 800 !important;
-      }
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-      .children {
-        -webkit-line-clamp: unset;
-        overflow: visible;
-        text-overflow: unset;
-        display: block; // or whatever layout you need
-      }
-    }
+  .figure {
+    display: inline-block;
+    width: auto;
+    position: relative;
+    margin: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    overflow: hidden;
   }
+
+  img {
+    width: auto;
+    height: auto;
+    display: block;
+    margin: 0 !important;
+    border: 1px solid gray;
+  }
+
+  .caption-cont:has(.no-children) {
+    visibility: hidden;
+   }
+
+  .children {
+    padding: 0 16px;
+    width: 100%;
+  }
+
+  .caption.with-children {
+    padding: 0px 16px 0 16px;
+    font-weight: 800 !important;
+  }
+
+  .figure .caption-cont::after {
+    content: "";
+    position: absolute;
+    top: auto;
+    bottom: 0px;
+    left: 0;
+    width: 32px;
+    height: 32px;
+
+    background-color: rgb(80 80 80 / 70%);
+    background-image: url("/icons/eye.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 18px;
+
+    border-radius: 4px;
+  }
+
+  .figure .caption-cont:has(:hover)::after {
+    opacity: 0
+  }
+
+  .caption-cont:has(.children) {
+    background-color: #fff4;
+  }
+
+  .caption-cont {
+    position: absolute;
+    bottom: 0;
+    background-color: white;
+    overflow: visible;
+    text-overflow: unset;
+    height: 32px;
+  }
+
+  .caption-cont:hover {
+    transition: opacity 0.2s linear;
+    background-color: #fffd;
+    padding: 16px 16px 0 16px;
+    height: auto;
+  }
+
+  .children {
+    text-align: left;
+  }
+}
+
+div.expanding-side-img-container:has(:hover) .overlay, div.expanding-side-img-container.overlay:has(.figure:hover) {
+  width: 100vw;
+  height: 100vh;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #dddd;
+  visibility: visible;
+  pointer-events: none;
+
+  .figure img {
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+}
+
+div.expanding-side-img-container:has(:hover) .figure, div.expanding-side-img-container.overlay .figure:hover {
+  opacity: 1;
+  pointer-events: visible;
 }
 
 @media print, ( max-width: 680px ) {