feat: add captions slider

anastanei · Sep 8, 2024 · df842af · df842af
1 parent eb27e43
commit df842af
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 19 deletions.
diff --git a/cssMemeSlider/index.css b/cssMemeSlider/index.css
@@ -19,9 +19,7 @@ h2 {
 }
 
 main {
-  /* max-width: 80%; */
   min-height: 100vh;
-  /* width: 100vw; */
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -55,13 +53,37 @@ main {
 
 .slides {
   display: flex;
-
   transition: all 1s ease-out;
 }
 
 .slide {
 }
 
+.caption-wrapper {
+  width: 100%;
+}
+
+.captions {
+}
+
+.caption {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  transition: opacity 1s ease-in-out;
+  overflow: hidden;
+}
+
+.control-1:checked~.footer .caption-wrapper .captions .caption-1,
+.control-2:checked~.footer .caption-wrapper .captions .caption-2,
+.control-3:checked~.footer .caption-wrapper .captions .caption-3,
+.control-4:checked~.footer .caption-wrapper .captions .caption-4 {
+  height: auto;
+  width: 100%;
+  opacity: 100%;
+  transition: opacity 1s ease-in-out;
+}
+
 .meme {
   border-radius: 0.5rem;
 }
@@ -79,7 +101,6 @@ main {
     flex-direction: row-reverse;
     justify-content: space-between;
     align-items: flex-start;
-    /* flex-direction: column;  */
     max-width: var(--footer-width-desktop);
   }
 }
@@ -118,20 +139,23 @@ input[type='radio'] {
   background-color: #f8b746;
 }
 
+.slides {
+
+}
 
-.control-1:checked~.slides {
+.control-1:checked~.wrapper .slider .slides {
   transform: translateX(0);
 }
 
-.control-2:checked~.slides {
+.control-2:checked~.wrapper .slider .slides {
   transform: translateX(-100%);
 
 }
 
-.control-3:checked~.slides {
+.control-3:checked~.wrapper .slider .slides {
   transform: translateX(-200%);
 }
 
-.control-4:checked~.slides {
+.control-4:checked~.wrapper .slider .slides {
   transform: translateX(-300%);
 }
diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html
@@ -12,12 +12,12 @@
 
 <body>
   <main class="main">
+    <input class="control control-1" id="control-1" name="slider" type="radio" checked>
+    <input class="control control-2" id="control-2" name="slider" type="radio">
+    <input class="control control-3" id="control-3" name="slider" type="radio">
+    <input class="control control-4" id="control-4" name="slider" type="radio">
     <div class="wrapper container">
       <div class="slider">
-        <input class="control control-1" id="control-1" name="slider" type="radio" checked>
-        <input class="control control-2" id="control-2" name="slider" type="radio">
-        <input class="control control-3" id="control-3" name="slider" type="radio">
-        <input class="control control-4" id="control-4" name="slider" type="radio">
         <div class="slides">
           <div class="slide">
             <img class="meme" src="./images/meme-1.webp" alt="" width="100">
@@ -34,20 +34,26 @@
         </div>
       </div>
     </div>
-    <div class="footer container">
+    <footer class="footer container">
       <div class="controls">
         <label class="label label-1" for="control-1"></label>
         <label class="label label-2" for="control-2"></label>
         <label class="label label-3" for="control-3"></label>
         <label class="label label-4" for="control-4"></label>
       </div>
-      <div class="captions">
-        <h2 class="caption caption-1">Binya</h2>
-        <h2 class="caption caption-2">Binya</h2>
-        <h2 class="caption caption-3">Binya</h2>
-        <h2 class="caption caption-4">Binya</h2>
+      <div class="caption-wrapper">
+        <div class="captions">
+          <h2 class="caption caption-1">Binya1 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Provident, earum.</h2>
+          <h2 class="caption caption-2">Binya2 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Provident, earum.</h2>
+          <h2 class="caption caption-3">Binya3 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Provident, earum.</h2>
+          <h2 class="caption caption-4">Binya4 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Provident, earum.</h2>
+        </div>
       </div>
-    </div>
+    </footer>
   </main>
 </body>