From 7218974de0fcc17194209856fcd54e1b634e5e61 Mon Sep 17 00:00:00 2001
From: midblep <mrrmiddynight@gmail.com>
Date: Fri, 25 Jun 2021 15:04:53 +0200
Subject: [PATCH] made gallery a masonry with hover effect

---
 components/footer.js      |  8 +++++++-
 pages/gallery.js          |  6 ++++--
 styles/Gallery.module.css | 34 +++++++++++++++++++++++++++++++---
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/components/footer.js b/components/footer.js
index d6a5236..d104766 100644
--- a/components/footer.js
+++ b/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>
diff --git a/pages/gallery.js b/pages/gallery.js
index abcaa05..be39f35 100644
--- a/pages/gallery.js
+++ b/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>
diff --git a/styles/Gallery.module.css b/styles/Gallery.module.css
index 1e369b5..5c32359 100644
--- a/styles/Gallery.module.css
+++ b/styles/Gallery.module.css
@@ -1,5 +1,33 @@
 .gallery {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-gap: 1em;
+    column-count: 3;
+    column-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;
 }
\ No newline at end of file