Trying to add portrait into carousel

chwag · Jul 9, 2024 · 27afc28 · 27afc28
1 parent 294148f
commit 27afc28
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/_layouts/about.liquid b/_layouts/about.liquid
@@ -53,9 +53,9 @@ layout: default
       {% comment %}
         <img src="assets/img/group/group1_reduced.jpg" alt="Group hike in the Pentland hills" class="pic">
       {% endcomment %}
-      <img src="assets/img/group/group2_reduced.jpg" alt="Group on Bristo square 2023" class="pic-portrait">
-      <img src="assets/img/group/group3_reduced.jpg" alt="Axe throwing social February 2024" class="pic">
-      <img src="assets/img/group/group4_reduced.jpg" alt="BMIA conference dinner" class="pic">
+      <img src="assets/img/group/group2_reduced.jpg" alt="Group on Bristo square 2023" class="landscape">
+      <img src="assets/img/group/group3_reduced.jpg" alt="Axe throwing social February 2024" class="landscape">
+      <img src="assets/img/group/group4_reduced.jpg" alt="BMIA conference dinner" class="portrait">
     </div>
 
     <!-- Latest posts -->

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -1262,7 +1262,7 @@ swiper-container {
   padding-top: 60%;
 }
 
-.pic-ctn > img {
+.pic-ctn > landscape {
   position: absolute;
   top: 0;
   left: calc(50% - 40%);
@@ -1271,6 +1271,15 @@ swiper-container {
   animation: display 15s infinite;
 }
 
+.pic-ctn > portrait {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 40%);
+  height: 50%;
+  opacity: 0;
+  animation: display 15s infinite;
+}
+
 img:nth-child(2) {
   animation-delay: 5s;
 }