hope

iowexpedition · Sep 9, 2023 · 46f46ca · 46f46ca
1 parent 8e5040a
commit 46f46ca
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/xander/index.html b/xander/index.html
@@ -72,7 +72,7 @@ <h2>Old Battery</h2>
  </div>
  </div>
  <br/>
- <div class="images-container">
+ <div class="images-container-route">
  <div class="image">
  <img src="../img/route_plan.JPG" alt="Route plan" />
  <div class="description">

diff --git a/xander/originalstyle.css b/xander/originalstyle.css
@@ -41,3 +41,44 @@
 .images-container .image:hover img {
  transform: scale(1.1);
 }
+
+.images-container-route {
+ width:fit-content;
+ height:fit-content;
+ margin: 0 auto;
+ display: flex;
+ border: 2px solid #222;
+}
+
+.images-container-route img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: all 400ms;
+}
+
+.images-container-route .image {
+ position: relative;
+ overflow: hidden;
+}
+
+.images-container-route .description {
+ position: absolute;
+ bottom: 0;
+ background: #222;
+ color: #fff;
+ padding: 8px 16px;
+ box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.4);
+ opacity: 0;
+ transition: all 400ms;
+ width: 100%;
+}
+
+.images-container-route .image:hover .description {
+ opacity: 1;
+ bottom: 0;
+}
+
+.images-container-route .image:hover img {
+ transform: scale(1.1);
+}