🌟 add popup animation

src/src/animations/popup.astro

@@ -0,0 +1,30 @@
+<script>
+// JavaScript
+document.querySelectorAll('img').forEach(img => {
+    img.addEventListener('click', function() {
+        const popup = document.createElement('img');
+        popup.src = this.src;
+        popup.classList.add('popup');
+
+        const overlay = document.createElement('div');
+        overlay.classList.add('overlay');
+
+        overlay.addEventListener('click', function() {
+            popup.style.opacity = '0';
+            this.style.opacity = '0';
+            setTimeout(() => {
+                popup.remove();
+                this.remove();
+            }, 300);
+        });
+
+        document.body.appendChild(overlay);
+        document.body.appendChild(popup);
+
+        setTimeout(() => {
+            popup.style.opacity = '1';
+            overlay.style.opacity = '1';
+        }, 0);
+    });
+});
+</script>

src/src/pages/collections/france.astro

@@ -1,6 +1,7 @@
 ---
 import "../../styles/global.css";
 import "../../animations/hide.astro";
+import "../../animations/popup.astro";
 
 import CollectionLayout from "../../layouts/CollectionLayout.astro";
 import GalleryImage from "../../components/GalleryImage.astro";

src/src/pages/collections/ireland.astro

@@ -1,6 +1,7 @@
 ---
 import "../../styles/global.css";
 import "../../animations/hide.astro";
+import "../../animations/popup.astro";
 
 import CollectionLayout from "../../layouts/CollectionLayout.astro";
 import GalleryImage from "../../components/GalleryImage.astro";

src/src/pages/collections/sardegna.astro

@@ -1,6 +1,7 @@
 ---
 import "../../styles/global.css";
 import "../../animations/hide.astro";
+import "../../animations/popup.astro";
 
 import GalleryImage from "../../components/GalleryImage.astro";
 import CollectionLayout from "../../layouts/CollectionLayout.astro";

src/src/pages/collections/tales.astro

@@ -1,6 +1,7 @@
 ---
 import "../../styles/global.css";
 import "../../animations/hide.astro";
+import "../../animations/popup.astro";
 
 import CollectionLayout from "../../layouts/CollectionLayout.astro";
 import GalleryImage from "../../components/GalleryImage.astro";

src/src/styles/global.css

@@ -66,4 +66,30 @@
 
 .hover-effect:hover {
     transform: scale(1.05);
+}
+
+.popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    max-width: 90%;
+    max-height: 90%;
+    overflow: auto;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    border-radius: 10px;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
 }