overlay on contact page image

themes/mir/layouts/_default/single.html

@@ -9,12 +9,15 @@
           <p class="text-lg">{{ .Params.subTitle }}</p>
           {{ partial "contact.html" . }}
         </div>
+        <div class="w-full relative inline-block">
           <div class="flex-col md:flex hidden bg-[#f1f5fc] p-4 rounded-lg">
-          <img class="relative object-cover aspect-[12/10] h-96 rounded-lg" src="{{ .Params.img }}">
+            <img class="relative object-cover aspect-square h-96 rounded-lg" src="{{ .Params.Img }}">
             </img>
             <div class="text-xs">Photo: <a class="z-40 font-bold" target="_blank"
                 href="https://unsplash.com/photos/group-of-blue-jellyfish-SJ94Ce7jpMc">Kaede KBYS</a></div>
           </div>
+          <div class="absolute inset-0 bg-white opacity-20 rounded-lg pointer-events-none"></div>
+        </div>
       </section>
       {{ else }}
       <div class="mt-2 flex flex-col gap-4">{{ .Content }}</div>