"image slider-4"
Bootstrap 3.3.0 Snippet by Pawan Pandey

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="jk-slider"> <div id="carousel-example" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example" data-slide-to="0" class="active"></li> <li data-target="#carousel-example" data-slide-to="1"></li> <li data-target="#carousel-example" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="hero"> <hgroup> <h1>Search for</h1> <h3>the books you need and save ! </h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </hgroup> </div> <div class="overlay"></div> <a href="#"><img src="http://placekitten.com/1600/600" /></a> </div> <div class="item"> <div class="hero"> <hgroup> <h1>Search for</h1> <h3>the books you need and save ! </h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </hgroup> </div> <div class="overlay"></div> <a href="#"><img src="http://placekitten.com/1600/600" /></a> </div> <div class="item"> <div class="hero"> <hgroup> <h1>Search for</h1> <h3>the books you need and save ! </h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p> </hgroup> </div> <div class="overlay"></div> <a href="#"><img src="http://placekitten.com/1600/600" /></a> </div> </div> <a class="left carousel-control" href="#carousel-example" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </section>
Bootsnipp Tools Snippets New Snippet Profile "slider with overlay" Bootstrap 3.3.0 Snippet by jaikesh yadav 3.3.0 slider PreviewHTMLCSS Fork this 6.7K  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 .jk-slider{ width:100%; } /* Hero Headers */ /********************************/ .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 6em; font-weight: bold; margin: 0; padding: 0; } .fade-carousel .carousel-inner .item .hero { opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .item.active .hero { opacity: 1; Similar snippets: See More 2.0K 0 Slider with white overlay 6.4K 4 Bootstrap Navbar and Slider Overlay Text 5.9K 8 Background Image Overlay 5.3K 3 Background Overlay with text Comments: Follow @bootsnipp Tweet Bootsnipp.com © 2015 Dan's Tools | Site Privacy policy | Advertise | Featured snippets are MIT license.

Related: See More


Questions / Comments: