Aligning Image Caption

Question

Currently, I have a problem with an image slideshow caption not positioning itself relative to the parent container. This may be a simple fix with the DIV floating but for the life of me I can't figure it out. The problem is the text does not stay within the constraints of the container that houses the image; and as such transforms differently upon resizing the webpage (basically moves off the visible area of the page). I'm hoping to set the height of the container housing the text to that of the parent container (the one housing the image) before formatting it to stay at the top 1/3 of the image in the center of the page. The text is based in an UL and transitions between items on the list as an overlay over the image.

This is the code on Codepen. As seen when the CSS transitions the Text (and the white background used for example) both are outside the bounds of the .container DIV (the UL with the dropshadow where I'm hoping to constrain the Text to.

Any help would be grately appreciated.

This is the HTML

<div class="container" >
<ul class="imageBanner">
<li>
<span>Image 01</span>
<div>
<h2>Ahoy.</h2>
</div>
</li>
<li><span>Image 02</span>
<div>
<h2>Welcome.</h2>
</div></li>
<li><span>Image 03</span>
<div>
<h2>Bonjour.</h2>
</div></li>
</ul>
</div>

This is the CSS

    .container {
  /* Full height*/
    height: 100%;
    box-shadow: 0px 8px 5px #888888;
    background:#ccc;
}


/* Image Slideshow Banner */


.imageBanner li span {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   color: transparent;
   background-size: cover;
   background-position: 30%;
   background-repeat: none;
   opacity: 0;
   z-index: 0;
   animation: imageAnimation 18s linear infinite 0s;
 }
 .imageBanner li div {
     z-index: 1;
     position: absolute;
     top:0px;
     width: 100%;
     text-align: center;
     opacity: 0;
     animation: titleAnimation 18s linear infinite 0s;
 }
 .imageBanner li div h2 {

     font-family:Calibri, Arial, sans-serif;
     background: #fff;
     font-size: 7em;
     color: rgb(46,105,163);

     line-height: 6em;
 }
.imageBanner li:nth-child(1) span {
 background-image: url('./images/iron_giant.jpg');
}
.imageBanner li:nth-child(2) span {
   background-image: url("./images/lonely_island.jpg");
   animation-delay: 6s;
}
.imageBanner li:nth-child(3) span {
   background-image: url("./images/mountain_range.jpg");
   animation-delay: 12s;
}

.imageBanner li:nth-child(2) div {
   animation-delay: 6s;
}
.imageBanner li:nth-child(3) div {
   animation-delay: 12s;
}
   @keyframes imageAnimation {
     0% { opacity: 0; animation-timing-function: ease-in; }
     8% { opacity: 1; animation-timing-function: ease-out; }
     17% { opacity: 1 }
     35% { opacity: 0 }
     100% { opacity: 0 }
 }
 @keyframes titleAnimation {
     0% { opacity: 0 }
     8% { opacity: 1 }
     17% { opacity: 1 }
     35% { opacity: 0 }
     100% { opacity: 0 }
 }

Answer 1

It was a little hard to find out what final result you seek without a live example, but every time your child elements place in a location that is not desirable, its mean they are not follow their parents. In this situation you had to work with parents first and then modify children.

I checked your css file and there is not even a single relative positioned parent. So i recommend you to edit your css file to this version and read the link i putted down below.

PS If you didn't get what you was looking for please make and screen shot/jsfiddle of you situation.

<div class="container" >
    <ul class="imageBanner">
      <li>
        <span>Image 01</span>
        <div>
          <h3>Ahoy.</h3>
        </div>
      </li>
      <li><span>Image 02</span>
        <div>
          <h3>Welcome.</h3>
        </div>
      </li>
      <li><span>Image 03</span>
        <div>
          <h3>Bonjour.</h3>
        </div>
      </li>
    </ul>
</div>

CSS: (this is just part of css that changed/modified)

.container {height: 100vh;box-shadow: 0px 8px 5px #888888;background:#CCC;display:block;position: relative;width: 100%;}
.imageBanner {position: relative;display: block;width: 100%;height: 100%;padding: 0 0 0;margin: 0 0 0;}
.imageBanner li {position: absolute;display: block;width: 100%;height: 100%;top:0;left:0;}
.imageBanner li span {font-family:Calibri, Arial, sans-serif;text-align: center;width: 100%;height: 100%;position: absolute;top: 15%;color: #000000;background-size: cover;background-repeat: none;opacity: 0;z-index: 50;font-size: 2em;animation: imageAnimation 18s linear infinite 0s;}
.imageBanner li div {z-index: 1;position: absolute;top:0px;width: 100%;height: 100%;text-align: center;opacity: 0;animation: titleAnimation 18s linear infinite 0s;}
.imageBanner li div h3 {font-family:Calibri, Arial, sans-serif;background: #fff;font-size: 7em;color: rgb(46,105,163);padding: 0 0 0;margin: 0 0 0;line-height: 6em;}

CSS Pos Tutorials
CSS Positions

Edit
CodePen

Answer 2

HTML5 markup will help you to understand center caption alignment.

Here is a Basic Example:

 .container { /* Full height*/ height: 100%; box-shadow: 0px 8px 5px #888888; background: #ccc; } ul { margin: 0; padding: 0; display: block; } li { list-style: none; height: 100% display: block; } /* Image Slideshow Banner */ .imageBanner li span { width: 100%; height: 100%; position: absolute; top: 0px; background-size: cover; background-repeat: none; z-index: 0; animation: imageAnimation 18s linear infinite 0s; } .imageBanner li div { z-index: 1; position: absolute; top: 0px; width: 100%; text-align: center; opacity: 0; animation: titleAnimation 18s linear infinite 0s; } .imageBanner li div h3 { font-family: Calibri, Arial, sans-serif; background: #fff; font-size: 7em; color: #2e69a3; line-height: 6em; } .imageBanner li:nth-child(1) span { background-image: url("https://unsplash.it/1200/800"); } .imageBanner li:nth-child(2) span { background-image: url("https://unsplash.it/1200/800"); animation-delay: 6s; } .imageBanner li:nth-child(3) span { background-image: url("https://unsplash.it/1200/800"); animation-delay: 12s; } .imageBanner li:nth-child(2) div { animation-delay: 6s; } .imageBanner li:nth-child(3) div { animation-delay: 12s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } } @keyframes titleAnimation { 0% { opacity: 0; } 8% { opacity: 1; } 17% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } } 

 <div class="container"> <ul class="imageBanner"> <li> <span></span> <div> <h3>Ahoy.</h3> </div> </li> <li><span></span> <div> <h3>Welcome.</h3> </div> </li> <li><span></span> <div> <h3>Bonjour.</h3> </div> </li> </ul> </div>