fix: title resize issue

_data/carousels.yml

@@ -16,6 +16,10 @@ carousels:
       "url": /assets/banner_tiger.jpg,
       "title": "TEST TITLE TIGER"
     }
+    - image: {
+      "url": /assets/banner_guatemala.jpg,
+      "title": "TEST TITLE GUATEMALAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+    }
   - images: 
     - image: {
       "url": /assets/banner_guatemala.jpg,

_includes/carousel.html

@@ -10,7 +10,12 @@
 
         <ul  class="carousel__track">
           {% for item in carousels[number].images %}
-          <li class="carousel__slide" style="background-image: url('{{ item.image['url'] }}');"></li>
+          <div class="carousel__slide_title">
+            <li class="carousel__slide" style="background-image: url('{{ item.image['url'] }}');"></li>
+            <div class="carousel_titles">
+              <p class="carousel_title"> {{item.image['title']}} </p>
+            </div>
+          </div>
           {% endfor %}
         </ul>
 
@@ -57,12 +62,6 @@
             {% endfor %}
           </div>
         </div>
-
-        <div class="carousel_titles">
-            {% for item in carousels[number].images %}
-              <p class="carousel_title"> {{item.image['title']}} </p>
-            {% endfor %}
-        </div>
     </div>
 </div>
 
@@ -81,10 +80,22 @@
 .carousel__activator {
   display: none;
 }
+
+.carousel__track>.carousel__slide_title{
+
+}
+
 {% for item in carousels[number].images %}
 .carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track {
 }
-.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track>.carousel__slide:nth-of-type({{ forloop.index }}) {
+
+
+
+.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track>.carousel__slide_title:nth-of-type({{ forloop.index }}) {
+  opacity:1;
+}
+
+.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track>.carousel__slide_title:nth-of-type({{ forloop.index }})>.carousel__slide {
   top: 0;
   left: 0;
   right: 0;
@@ -93,7 +104,7 @@
           transform: scale(1);
 }
 
-.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel_titles>.carousel_title:nth-of-type({{ forloop.index }}) {
+.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track>.carousel__slide_title:nth-of-type({{ forloop.index }})>.carousel_titles>.carousel_title {
   opacity: 1;
   -webkit-transform: scale(1);
           transform: scale(1);
@@ -180,6 +191,7 @@
 {% for item in carousels[number].images %}
 .carousel__track .carousel__slide:nth-of-type({{ forloop.index }}) {
   opacity: 0;
+  transition: opacity 2s ease 0s;
 }
 {% endfor %}
 
@@ -192,7 +204,6 @@
   position: absolute;
   opacity: 0;
   overflow: hidden;
-  transition: opacity 2s ease 0s;
 }
 .carousel__slide .overlay {height: 100%;}
 .carousel--thumb .carousel__indicator {
@@ -218,19 +229,25 @@
 
 .carousel_titles {
   height: 5%;
-  top: 87%;
+  bottom: 0%;
   width: 100%;
-  background-color: #000000a6;
+  background-color: #00000000;
   position: absolute;
   padding: 5px;
+  opacity: 1;
+  z-index: 25;
 }
 
-{% for item in carousels[number].images %}
-.carousel_titles .carousel_title:nth-of-type({{ forloop.index }}) {
+.carousel__slide_title:nth-of-type(1)>.carousel_titles {
+  background-color: #000000a6;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+
+.carousel_title {
   opacity: 0;
   transition: opacity 0.5s ease 0.5s;
 }
-{% endfor %}
 
 
 .carousel_title { 

_layouts/home.html

@@ -9,7 +9,7 @@ <h1 class="page-heading">{{ page.title }}</h1>
 
   {{ content }}
 
-  {% include carousel.html height="50" unit="%" duration="10" number="1" %}
+  {% include carousel.html height="50" unit="%"  number="1" %}
 
   {% include carousel.html height="50" unit="%" duration="10" number="2" %}