made gallery a masonry with hover effect

components/footer.js

@@ -6,7 +6,13 @@ const Footer = () => (
     <div>
         <div className={styles.footer}>
             <div className="container">
-                <h4>Made with <FontAwesomeIcon icon={faHeart} style={{color: "#63C5DA"}} size="1x" /> by <a href="https://twitter.com/midblep" className="link" target="_blank">Midblep</a></h4>
+                <p>
+                    <b>
+                        Made with <FontAwesomeIcon icon={faHeart} style={{color: "#63C5DA"}} size="1x" /> by <a href="https://twitter.com/midblep" className="link" target="_blank">Midblep</a>
+                    </b>
+                    <br/>
+                    NextJS // Vercel // Airtable
+                </p>
             </div>
         </div>
     </div>

pages/gallery.js

@@ -26,9 +26,11 @@ export default function Gallery({ response }) {
 
                         <div className={styles.gallery}>
                             {images.map((image) => (
-                                <div>
+                                <div key={image.link.toString()}>
                                     <img src={image.link}></img>
-                                    <h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
+                                    <div className={styles.overlay}>
+                                        <h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
+                                    </div>
                                 </div>
                             ))}
                         </div>

styles/Gallery.module.css

@@ -1,5 +1,33 @@
 .gallery {
-    display: grid;
+    column-count: 3;
-    grid-template-columns: auto auto auto;
+    column-gap: 1em;
-    grid-gap: 1em;
+}
+
+.gallery > div {
+    margin-bottom: 1em;
+    display: block;
+    width: 100%;
+    height: auto;
+    width: 100%;
+    height: auto;
+    position: relative;
+}
+
+.overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    transition: .5s ease;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 10px;
+}
+  
+.gallery > div:hover .overlay {
+    opacity: 1;
 }