Text animation over slide show using "cycle-after" for cycle2

I'm trying to make text slide or fade in from being hidden after the slideshow has completed transitioning to the next slide. An example is the slideshow on this website.

I am trying to do this using the "cycle-after" event the cycle-2 API has specified, however I am not well-versed in jQuery and I am not sure of what event handler code to place within the event to achieve this effect, i.e.:

$( '#mySlideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    // I'm not sure what to put here to make this effect//
});

I know I need to make divs with the text and plug them into the jQuery, I just don't know the correct code to achieve that effect.

Also, I want the text to look similar to that of the website I have previously mentioned, which is why I am not using the overlay feature in cycle2.

Here is my code so far:

HTML:

<script type id="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2    /jquery.min.js"></script>

<script type id="text/javascript" src="https://malsup.github.io/min/jquery.cycle2.min.js"></script>

</head>
<body>
<div id="container">
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=4000
data-cycle-slides="> a"
data-cycle-pause-on-hover="true"
 >

<div class="cycle-prev"></div>
<div class="cycle-next"></div>

<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss1resize_zps6b660b8e.jpg" />
</a>

<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss2resize_zps2fb527e4.jpg" />
</a>

<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss3resize_zpsffdcdbd2.jpg" />
</a>

<a href="">

<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss4resize_zps8d09372f.jpg" />
</a> 

<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss5resize_zpscb87b4ed.jpg" />
</a>

</div><!-- slideshow -->
</div><!-- container -->


</body>

CSS:

<style type="text/css">

.cycle-slideshow, .cycle-slideshow * {
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;  
}
.cycle-slideshow {
  width: 100%;
  min-width: 320px;
  max-width: 960px;
  margin: 10px auto;
  padding: 0;
  position: relative;
  background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
}
.cycle-slideshow img:first-child {
    position: static; 
    z-index: 100;
}
.cycle-slideshow img { 
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    padding: 0; 
    display: block;
}
.cycle-slideshow a{
    display: block;
    width: 100%;
}

.cycle-prev, .cycle-next { 
position: absolute; 
top: 35%; 
width: 6.68%;
height: 23%;
opacity: 0.3;
z-index: 800; 
cursor: pointer;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cycle-prev{
  background: url('http://i1255.photobucket.com/albums/hh628/prestonhitzler/Arrow- Back1_zps9f5ab580.png') 50% 50% no-repeat;
  left: 0;
  background-size: 100%;
}
.cycle-next{
background: url('http://i1255.photobucket.com/albums/hh628/prestonhitzler/Arrows-       Forward1_zps598390d7.png') 50% 50% no-repeat;
  right: 0;
  background-size: 100%;
}

.cycle-prev:hover, .cycle-next:hover {
  opacity: 0.5;
}
 </style>
</html>

Solution

You will want to cycle a set of containers.

<div class='cycle-wrap'>
    <div class='slide'></div>
    <div class='slide'></div>
</div>

Inside each of the containers you will place your image, and the overlay content.

<div class='slide'>
    <img src='' />
    <div class='content'></div>
</div>

These will need to positioned like so:

.slide {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.slide > img {
    position: absolute;
    width: 100%;
    height: auto; //these numbers can obviously be more specific dimensions
}

.slide > .content
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .3s;
    z-index: 10;
}

.slide.cycle-slide-active > .content
    opacity: 1;
    transition: .3s;
}

Now whatever you put inside your .content for each slide will be faded in on whatever slide cycle adds the .cycle-slide-active class to. No additional jQuery necessary what-so-ever.

To make the cycle plugin attach to the .slide elements change how you create cycle to indicate that it should cycle .slide:

<div class="cycle-slideshow" data-cycle-slides=".slide">