Flexslider不会显示第一张幻灯片后的标题

Question

I am a newbie in coding and I am trying to add caption with transition to FlexSlider. It works for the 1st slide but for the slides after it won't show. Maybe css alone is not enough to handle that? It'd be great if someone can show me how it can be done with js if it's necessary. Thanks a lot!

Link to jsfiddle: https://jsfiddle.net/ghLm7rL5/1/

The code:

  $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", directionNav: false, animationLoop: false }); }); 

 .flexslider .slides .flex-caption{ position: absolute; background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; opacity: 0; bottom: 0; left: -30%; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .flexslider .slides li:hover .flex-caption{ opacity: 1; left: 0;} 

 <div class="flexslider"> <ul class="slides"> <li> <a href="#" rel="lightbox" title="Some Title"> <img src="images/graphic_design_thumb1.png" alt="graphic_design_thumb1"/></a> <div class="flex-caption">Caption1</div></li> <li><a href="#" rel="lightbox" title="Some Title"> <img src="images/graphic_design_thumb2.png" alt="graphic_design_thumb2"/></a> <div class="flex-caption">Caption2</div></li> </ul> </div> 

Answer 1

CSS

.slides li{
    position:relative;
}

.flexslider .slides .flex-caption{
    position: absolute; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    padding: 10px 20px; 
    opacity: 0;
    bottom: 0; 
    left: -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

.flexslider .slides li:hover .flex-caption{  opacity: 1;  left: 0;}

Use the above CSS and it will work since your position:absolute for the caption you need to have a poition:relative for it's parent div so that it takes it width and shows else it will be show at the screen width which is nothing but the image1's width left side

DEMO