image zoom

css/portfolio.css

@@ -9,6 +9,7 @@
         border-radius: var(--border-radius);
         transition: transform 0.3s, box-shadow 0.3s;
         position: relative;
+        cursor: pointer;
     }
 
     & > *:hover {
@@ -41,3 +42,68 @@
         grid-row: span 2;
     }
 }
+
+#lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    &.open {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    & > img {
+        max-width: min(90vw, 1200px);
+        max-height: 85vh;
+        border-radius: var(--small-radius);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        object-fit: contain;
+    }
+
+    & > button {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.5);
+        border: none;
+        color: white;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 3rem;
+        height: 3rem;
+        border-radius: 50%;
+        transition: background 0.2s;
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.8);
+        }
+
+        & svg {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+    }
+
+    & #lb-close {
+        top: 1.5rem;
+        right: 1.5rem;
+    }
+
+    & #lb-prev {
+        left: 1.5rem;
+    }
+
+    & #lb-next {
+        right: 1.5rem;
+    }
+}