Implement the non-javascript image zoom-in effect.

Add a zoom-in effect for better visibility by following this post:
https://adityatelange.in/blog/hugo-image-zoom-in/

But I am leveraging ox-hugo to export org-mode to Hugo markdown,
ox-hugo uses `figure` shortcodes rather than standard Markdown image,
so I need to tweak the figure shortcode to apply the approach.

Author: ramsayleung

assets/css/extended/image-zoom-in.css

@@ -0,0 +1,50 @@
+@media screen and (min-width: 769px) {
+    /* Position relative on the container to create a stacking context */
+    .post-content {
+        position: relative;
+    }
+
+    /* Hide the checkbox visually */
+    .post-content input[type="checkbox"] {
+        position: absolute;
+        opacity: 0;
+    }
+
+    /* When checkbox is checked, create a fullscreen overlay */
+    .post-content input[type="checkbox"]:checked ~ label::before {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(255, 255, 255, 0.8);
+        backdrop-filter: blur(5px);
+        -webkit-backdrop-filter: blur(5px);
+        z-index: 998;
+    }
+
+    /* Style for the zoomed image */
+    .post-content input[type="checkbox"]:checked ~ label > img {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(1);
+        max-height: 90vh;  /* Maximum height: 90% of viewport height */
+        max-width: 90vw;   /* Maximum width: 90% of viewport width */
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        cursor: zoom-out;
+        z-index: 999;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    }
+
+    /* Normal image style */
+    .post-content img.zoomCheck {
+        transition: all 0.3s ease;
+        cursor: zoom-in;
+        max-width: 100%;
+        height: auto;
+    }
+}

layouts/partials/extend_footer.html

@@ -0,0 +1,42 @@
+{{- $random := (substr (md5 (.Get "src")) 0 5) }}
+<figure{{ if or (.Get "class") (eq (.Get "align") "center") }} class="
+           {{- if eq (.Get "align") "center" }}align-center {{ end }}
+           {{- with .Get "class" }}{{ . }}{{- end }}"
+{{- end -}}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end }}
+    
+    <!-- Zoom functionality start -->
+    <input type="checkbox" id="zoomCheck-{{$random}}" hidden>
+    <label for="zoomCheck-{{$random}}">
+    <!-- Zoom functionality end -->
+    
+    <img class="zoomCheck" loading="lazy" src="{{ .Get "src" }}{{- if eq (.Get "align") "center" }}#center{{- end }}"
+         {{- if or (.Get "alt") (.Get "caption") }}
+         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+         {{- end -}}
+         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+    /> <!-- Closing img tag -->
+    
+    <!-- Closing label for zoom -->
+    </label>
+    
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                {{ . }}
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>