diff --git a/assets/img/after1.jpg b/assets/img/after1.jpg
new file mode 100644
index 0000000..9d1fa89
Binary files /dev/null and b/assets/img/after1.jpg differ
diff --git a/assets/img/before1.jpg b/assets/img/before1.jpg
new file mode 100644
index 0000000..58fdfcd
Binary files /dev/null and b/assets/img/before1.jpg differ
diff --git a/css/style.css b/css/style.css
index 614f141..2ff2011 100644
--- a/css/style.css
+++ b/css/style.css
@@ -171,7 +171,7 @@ footer {
}
#book-button:hover {
cursor: pointer;
- background-color: var(--dark-gold);
+ background-color: #000;
box-shadow: 0px 0px 30px var(--gold);
}
#book-button:active {
diff --git a/reviews.html b/reviews.html
index 979c2bc..bf41fba 100644
--- a/reviews.html
+++ b/reviews.html
@@ -46,6 +46,46 @@
text-align: left;
}
+ /** GALLERY!! */
+ #gallery {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .image-pair {
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ width: 75%;
+ }
+
+ .before-img {
+ max-height: 100%;
+ }
+
+ .after-img-container {
+ position: absolute;
+ top: 0;
+
+ max-height: 100%;
+
+ opacity: 0%;
+ transition: .5s;
+ }
+ .after-img-container:hover {
+ opacity: 100%;
+ }
+
+ .after-img {
+ height: 100%;
+ width: 100%;
+ }
+
/** DESKTOP RULES */
@media screen and (min-width: 851px) {
#reviewContainer {
@@ -59,6 +99,10 @@
overflow: hidden;
}
+
+ .image-pair, .before-img, .after-img-container {
+ width: 80%;
+ }
}
/* MOBILE RULES */
@@ -73,6 +117,10 @@
.review-card {
width: 100%;
}
+
+ .image-pair, .before-img, .after-img-container {
+ width: 100%;
+ }
}
@@ -107,9 +155,18 @@
+
+
+ Gallery
+
+

+
+
+
+
+