Refine image zoom functionality to skip small icons and enhance hover overlay

css/style.css

@@ -1240,7 +1240,7 @@ footer.footer-modern a:hover {
 	background-color: rgba(0, 0, 0, 0.38);
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
 	background-position: center;
-	background-size: 52px;
+	background-size: min(44px, 25%);
 	background-repeat: no-repeat;
 	opacity: 0;
 	transition: opacity 0.2s ease;

index.php

@@ -369,7 +369,10 @@
 			}
 
 			Array.prototype.forEach.call(images, function (el) {
-				// Wrap in a span so CSS can attach the hover badge via ::after
+				// Skip icons / tiny images — not worth zooming
+				if (el.offsetWidth < 80 && el.offsetHeight < 80) return;
+
+				// Wrap in a span so CSS can attach the hover overlay via ::after
 				var wrap = document.createElement('span');
 				wrap.className = 'zoomable-wrap';
 				el.parentNode.insertBefore(wrap, el);