Add zoom‑in effect for images

Author: johanrin

layouts/_default/_markup/render-image.html

@@ -0,0 +1,14 @@
+<!-- Checks if page is part of section and page is not section itself -->
+{{- if and (ne .Page.Kind "section") (.Page.Section ) }}
+    <!-- Generate a unique id for each image -->
+    {{- $random := (substr (md5 .Destination) 0 5) }}
+    <input type="checkbox" id="zoomCheck-{{$random}}" hidden>
+    <label for="zoomCheck-{{$random}}">
+        <img class="zoomCheck" loading="lazy" decoding="async" 
+            src="{{ .Destination | safeURL }}" alt="{{ .Text }}" 
+            {{ with.Title}} title="{{ . }}" {{ end }} />
+    </label>
+{{- else }}
+    <img loading="lazy" decoding="async" src="{{ .Destination | safeURL }}" 
+        alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
+{{- end }}

layouts/partials/custom-head.html

@@ -0,0 +1,18 @@
+<style>
+@media screen and (min-width: 769px) {
+    /* .post-content is a class which will be present only on single pages 
+        and not lists and section pages in Hugo */
+    .page-content input[type="checkbox"]:checked ~ label > img {
+        transform: scale(1.6);
+        cursor: zoom-out;
+        position: relative;
+        z-index: 999;
+    }
+
+    .page-content img.zoomCheck {
+        transition: transform 0.15s ease;
+        z-index: 999;
+        cursor: zoom-in;
+    }
+}
+</style>