From 896ed2c0b8cebe6b8689b162c22b0e9aeb1fe9db Mon Sep 17 00:00:00 2001
From: mtgmonkey <mtgmonkey@nixos>
Date: Fri, 24 Oct 2025 08:47:21 +0200
Subject: [PATCH] image hover effect

---
 templates/shortcodes/size_image.html | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/templates/shortcodes/size_image.html b/templates/shortcodes/size_image.html
index f4d6209..82fb06b 100644
--- a/templates/shortcodes/size_image.html
+++ b/templates/shortcodes/size_image.html
@@ -1,4 +1,21 @@
 {% set image = resize_image(path=path, width=width, height=height, op="fit") %}
-<a href="{{ get_url(path=path) }}" target="_blank">
-<img src="{{ image.url }}" />
+<a href="{{ get_url(path=path) }}" 
+   style="position:relative; display:inline-block;"
+   target="_blank"
+   onmouseenter="this.querySelector('img').style.opacity='0.2'; this.querySelector('span').style.opacity='1';"
+   onmouseleave="this.querySelector('img').style.opacity='1'; this.querySelector('span').style.opacity='0';">
+  <img src="{{ image.url }}" style="display:block; transition:opacity 0.3s;">
+  <span style="
+    position:absolute;
+    inset:0;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    color:black;
+    font-size:20px;
+    opacity:0;
+    transition:opacity 0.3s;
+    ">
+    Für besseres Foto klicken
+  </span>
 </a>