CODEWITHSUNDEEP
htmlcssslideshow
WendiT
WendiT

Reputation: 605

Text below css slider

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">
        <a href="#"><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=""></a>
        <a href="#" class="more-link"> More... </a>
        <h2 class="title"><a href="#">Title text 1</a></h2>
        <div class="excerpt">
          <div class="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
          <p class="whatever" href="#">Some text 1</p>
        </div>
      </div>
      <div class="jerslides">
        <a href="#"><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=""></a>
        <a href="#" class="more-link"> More... </a>
        <h2 class="title"><a href="#">Title text 2</a></h2>
        <div class="excerpt">
          <div class="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
          <p class="whatever" href="#">Some text 2</p>
        </div>
      </div>
      <div class="jerslides">
        <a href="#"><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=""></a>
        <a href="#" class="more-link"> More... </a>
        <h2 class="title"><a href="#">Title text 3</a></h2>
        <div class="excerpt">
          <div class="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></div>
          <p class="whatever" href="#">Some text 3</p>
        </div>
      </div>
      <div class="jerslides">
        <a href="#"><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=""></a>
        <a href="#" class="more-link"> More... </a>
        <h2 class="title"><a href="#">Title text 4</a></h2>
        <div class="excerpt">
          <div class="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</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;
}

Upvotes: 0

Views: 1342

Answers (1)

myohmywhoami
myohmywhoami

Reputation: 78

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.

Upvotes: 1

Related Questions