added cool effect for selected image in image results page

static/css/style.css

@@ -220,10 +220,12 @@ html {
     height: 10rem;
     max-width: 20rem;
     min-width: 3rem;
+    transition: outline 0.3s ease, transform 0.3s ease;
 }
 
 .image_selected {
-    border: 1px solid var(--border);
+    outline: 1px solid var(--border);
+    transform: scale(1.05);
 }
 
 .image>a {

static/js/imageviewer.js

@@ -68,6 +68,14 @@ document.addEventListener('DOMContentLoaded', function() {
     function displayImage(index) {
         if (index < 0 || index >= imageList.length) return;
 
+        // Remove the `.image_selected` class from all images
+        imageList.forEach(img => {
+            const parentImageDiv = img.closest('.image');
+            if (parentImageDiv) {
+                parentImageDiv.classList.remove('image_selected');
+            }
+        });
+    
         const imgElement = imageList[index];
         const parentImageDiv = imgElement.closest('.image');
 
@@ -76,6 +84,9 @@ document.addEventListener('DOMContentLoaded', function() {
             return;
         }
 
+        // Add the `.image_selected` class to the currently displayed image
+        parentImageDiv.classList.add('image_selected');
+    
         // Use the `data-full` attribute for the full image URL
         let fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
         const title = imgElement.alt || 'Untitled';
@@ -123,6 +134,14 @@ document.addEventListener('DOMContentLoaded', function() {
         imagesContainer.classList.add('images_viewer_hidden');
         document.body.classList.remove('viewer-open');
         viewerOverlay.style.display = 'none';
+    
+        // Remove `.image_selected` from all images
+        imageList.forEach(img => {
+            const parentImageDiv = img.closest('.image');
+            if (parentImageDiv) {
+                parentImageDiv.classList.remove('image_selected');
+            }
+        });
     }
 
     // Navigation functions