Add zoomable image wrapper with hover magnifier effect

css/style.css

@@ -1222,11 +1222,37 @@ footer.footer-modern a:hover {
 	transform: scale(1);
 }
 
-/* Hint that content images are clickable */
+/* Zoomable image wrapper — JS wraps each content image in this span */
-.content img {
+.zoomable-wrap {
+	position: relative;
+	display: inline-block;
 	cursor: zoom-in;
 }
 
+/* Magnifier badge that appears on hover */
+.zoomable-wrap::after {
+	content: '';
+	position: absolute;
+	bottom: 8px;
+	right: 8px;
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	background:
+		rgba(0, 0, 0, 0.55)
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zM7 4.5a.5.5 0 0 0-1 0V6H4.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V7h1.5a.5.5 0 0 0 0-1H7V4.5z'/%3E%3C/svg%3E")
+		center / 14px no-repeat;
+	opacity: 0;
+	transform: scale(0.8);
+	transition: opacity 0.18s ease, transform 0.18s ease;
+	pointer-events: none;
+}
+
+.zoomable-wrap:hover::after {
+	opacity: 1;
+	transform: scale(1);
+}
+
 /* ========================================
    TABLE OF CONTENTS (left sidebar, article view)
    ======================================== */

index.php

@@ -369,6 +369,11 @@
 			}
 
 			Array.prototype.forEach.call(images, function (el) {
+				// Wrap in a span so CSS can attach the hover badge via ::after
+				var wrap = document.createElement('span');
+				wrap.className = 'zoomable-wrap';
+				el.parentNode.insertBefore(wrap, el);
+				wrap.appendChild(el);
 				el.addEventListener('click', function () { open(el.src, el.alt); });
 			});