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 @@
-

Reviews

+ +