Text below css slider - html

Question

I want to make a 100% css slider. The slider in the jsfiddle below works, but I want to add text below the image that moves with the image. And there I am stuck. I don't understand why the text doesn't show up at all.
Please help...
jsFiddle
html
<div class="slider-wrap">
<div id="slider">
<div class="jt_slides">
<div class="jerslides">
<img src="https://blog.psprint.com/sites/default/files/2014/06/Palette-Fathers-Day-COLOURlovers-Google-Chrome_2014-06-10_14-53-52.png" alt="">
More...
<h2 class="title">Title text 1</h2>
<div class="excerpt">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="whatever" href="#">Some text 1</p>
</div>
</div>
<div class="jerslides">
<img src="https://blog.psprint.com/sites/default/files/2014/05/Palette-Lookin-Like-Summer-COLOURlovers-Google-Chrome_2014-05-29_10-07-53.png" alt="">
More...
<h2 class="title">Title text 2</h2>
<div class="excerpt">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="whatever" href="#">Some text 2</p>
</div>
</div>
<div class="jerslides">
<img src="https://blog.psprint.com/sites/default/files/2014/04/Palette-Mothers-Day-COLOURlovers-Google-Chrome_2014-04-28_09-24-37.png" alt="">
More...
<h2 class="title">Title text 3</h2>
<div class="excerpt">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="whatever" href="#">Some text 3</p>
</div>
</div>
<div class="jerslides">
<img src="https://blog.psprint.com/sites/default/files/2014/06/Palette-Fathers-Day-COLOURlovers-Google-Chrome_2014-06-10_14-53-52.png" alt="">
More...
<h2 class="title">Title text 4</h2>
<div class="excerpt">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="whatever" href="#">Some text 4</p>
</div>
</div>
</div>
</div>
</div>
css
div.slider-wrap {
width: 640px;
height: 100%;
float: left
}
div#slider {
width: 80%;
max-width: 640px;
}
div#slider .jt_slides {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
}
div#slider .jerslides {
width: 25%;
height: auto;
float:left
}
div#slider {
width: 100%;
max-width: 600px;
overflow: hidden;
margin: 26px auto 0;
}
#keyframes slidy {
0% {
left: 0%;
}
29% {
left: 0%;
}
33% {
left: -100%;
}
62% {
left: -100%;
}
67% {
left: -200%;
}
96% {
left: -200%;
}
100% {
left: -300%;
}
}
div#slider .jt_slides {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
left: 0;
text-align: left;
animation: 16s slidy infinite;
}
div#slider:hover .jt_slides {
/*transition: opacity .5s;*/
opacity: 0.9;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.jerslides img {
margin-bottom: 20px
}
.jerslides .more-link {
float: right;
margin: 0 0 10px 10px;
}

Answer 1

The text is there, but it does not appear because it inherits the font-size: 0; from its ancestor element div#slider .jt_slides. Remove that rule and the text behaves as desired.
By the way, your CSS contains multiple rule-sets for some of the HTML elements, such as div#slider .jt_slides. Generally it's a good idea to consolidate duplicates into one rule-set. This can reduce confusion and make it easier to change CSS later on. This is because if a CSS rule is defined in only one of the rule-sets, it will still apply. For example here, since there are two rule-sets for div#slider .jt_slides and both contain the rule font-size: 0;, if you only remove font-size: 0; from one rule-set, it will still apply because it's still in the other rule-set. Consolidating would mean that when you remove font-size: 0; once, you know it's gone for good.