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 = () => (
{images.map((image) => (
-
+
-
{image.name}
+
+
{image.name}
+
))}
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