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>
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 thecaption
you need to have apoition: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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.