20 - CSS Grid Image Gallery Finished

Author: jonathanedempsey

20 - CSS Grid Image Gallery/image-gallery-START.html

@@ -47,7 +47,7 @@
 
     .close {
       background: none;
-      color: white;
+      color: black;
       border: 0;
     }
 
@@ -60,6 +60,41 @@
 
     .item {
       overflow: hidden;
+      display: grid;
+      grid-template-columns: 1;
+      grid-template-rows: 1;
+    }
+
+    .item img {
+      grid-column: 1 / 1;
+      grid-row: 1 / -1;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .item__overlay {
+      background: #ffc60032;
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
+      position: relative;
+      display: grid;
+      justify-items: center;
+      align-items: center;
+      transition: 0.3s;
+      transform: translateY(100%);
+    }
+
+    .item__overlay button {
+      background: none;
+      border: 2px solid white;
+      color: white;
+      text-transform: uppercase;
+      padding: 5px;
+    }
+
+    .item:hover .item__overlay {
+      transform: translateY(0);
     }
 
     .item.v2 {
@@ -99,9 +134,11 @@
 
     .overlay.open {
       display: grid;
+      align-items: center;
+      justify-items: center;
     }
 
-    .overlay figure {
+    .overlay .overlay-inner {
       background: white;
       width: 700px;
       padding: 20px;
@@ -133,11 +170,29 @@
       return Math.floor(Math.random() * limit + 1);
     }
 
+    function handleClick(e) {
+      const src = e.currentTarget.querySelector('img').src;
+      overlayImage.src = src;
+      overlay.classList.add('open');
+      // console.log(e.currentTarget);
+      // console.log(src);
+    }
+
+    function close() {
+      overlay.classList.remove('open');
+    }
+
     const digits = Array.from({ length: 50}, () => [randomNumber(4), randomNumber(4)]).concat([[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1]]);
 
     const html = digits.map(generateHTML).join('');
     gallery.innerHTML = html;
 
+    const items = document.querySelectorAll('.item');
+
+    items.forEach(item => item.addEventListener('click', handleClick));
+
+    overlayClose.addEventListener('click', close);
+
   </script>
 </body>