remove transparent bg on zoom

Author: ArthurFlag

layouts/_default/_markup/render-image.html

@@ -14,6 +14,7 @@
 {{ $height := $params.Get "h" }}
 {{ $border := $params.Has "border" }}
 
+
 <figure
   x-data="{ zoom: false }"
   @click="zoom = ! zoom"
@@ -23,9 +24,11 @@
     loading="lazy"
     src="{{ $src }}"
     alt="{{ .Text }}"
-    {{ with $width }} width="{{ . }}" {{ end }}
-    {{ with $height }} height="{{ . }}" {{ end }}
-    class="rounded mx-auto{{ with $border }} border border-divider-light dark:border-divider-dark{{end}}"
+    {{ with $width }}width="{{ . }}"{{ end }}
+    {{ with $height }}height="{{ . }}"{{ end }}
+    class="mx-auto{{ with $border }}
+      border border-divider-light dark:border-divider-dark
+    {{ end }} rounded"
   />
   {{ with .Title }}
     <figcaption class="text-gray-light dark:text-gray-dark">{{ . }}</figcaption>
@@ -35,16 +38,14 @@
       x-show="zoom"
       @click="zoom = false"
       x-transition.opacity.duration.250ms
-      class="fixed z-20 inset-0 flex items-center justify-center bg-black/70 p-6"
+      class="fixed inset-0 z-20 flex items-center justify-center bg-black/100 p-6"
     >
-      <button
-        class="text-white fixed z-30 top-6 right-8 icon-svg"
-      >
+      <button class="icon-svg fixed right-8 top-6 z-30 text-white">
         {{ partialCached "icon" "close" "close" }}
       </button>
       <img
         loading="lazy"
-        class="rounded max-w-full max-h-full"
+        class="max-h-full max-w-full rounded"
         src="{{ $src }}"
         alt="{{ .Text }}"
       />