"Carousel diff"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- EXCLUSIVE DEALS --> <section class="container-fluid"> <div class="row"> <div class="container"> <div class="row"> <div class="col-md-12 carousel-deal"> <h3 class="title text-center"><span class="light"> </span> Destination </h3> <div id="carousel-deal" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="col-md-4"> <div class="img_back"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="image" class="img-responsive"> <div class="img_bann_content"> <div class="center_content"> <h2>London</h2> <p>The city that’s a world in itself, London awaits your presence.</p> <h2></h2> </div> </div> </div> </div> <div class="col-md-4"> <div class="img_back"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="image" class="img-responsive"> <div class="img_bann_content"> <div class="center_content"> <h2>New York</h2> <p>The city that never sleeps is just the finest choice.</p> <h2></h2> </div> </div> </div> </div> <div class="col-md-4"> <div class="img_back"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="image" class="img-responsive"> <div class="img_bann_content"> <div class="center_content"> <h2>Amsterdam</h2> <p>Exceptional culture. Imagination beyond the Netherlands.</p> <h2></h2> </div> </div> </div> </div> </div> <div class="item"> <div class="col-md-4"> <div class="img_back"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="image" class="img-responsive"> <div class="img_bann_content"> <div class="center_content"> <h2>Paris</h2> <p>Fall in love with the city that teaches romance like no one.</p> <h2></h2> </div> </div> </div> </div> <div class="col-md-4"> <div class="img_back"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="image" class="img-responsive"> <div class="img_bann_content"> <div class="center_content"> <h2>Las Vegas</h2> <p>What happens in Vegas, does not have to stay in Vegas.</p> <h2></h2> </div> </div> </div> </div> <div class="col-md-4"> <div class="img_back"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="image" class="img-responsive"> <div class="img_bann_content"> <div class="center_content"> <h2>Miami</h2> <p>Beaches. Music. Suntans. Glamor. Sports. And You. Perfect!</p> <h2></h2> </div> </div> </div> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control hidden-xs" href="#carousel-deal" role="button" data-slide="prev"> <span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control hidden-xs" href="#carousel-deal" role="button" data-slide="next"> <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> </section> </body> </html>
/* -- Deals -- */ .carousel-deal {padding-top: 60px;padding-bottom: 60px;} .carousel-deal .title {font-size: 35px; text-align: center; margin-top: 0; text-transform: uppercase; color: #fe601b;} .carousel-deal .carousel-control.left, .carousel-deal .carousel-control.right {background: none;} .carousel-deal .carousel-control {opacity: 1; width: 0;} .carousel-deal .carousel-control .glyphicon-hand-right, .carousel-deal .carousel-control .icon-next { margin-right: -20px; color: #141c60; top: 55%; left: 50%;} .carousel-deal .carousel-control .glyphicon-hand-left, .carousel-deal .carousel-control .icon-prev { margin-left: -20px; color: #141c60; top: 55%; right: 50%;} .img_back {background-size: cover; color: #ffffff;position: relative;transition: all 0.4s ease-in-out;background-position: center; overflow: hidden;border: 1px solid #141c60;margin: 20px 0;} .img_bann_content {text-align: center;background: rgba(20, 28, 96, 0.46);position: absolute;top: 50%;left: 50%;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);width: 100%;height: 100%;} .center_content {position: absolute;top: 50%;left: 50%;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .img_back:hover .img_bann_content {background:rgba(20, 28, 96, 0.80);transition: all 0.4s ease-in-out;}

Related: See More

Argon Design System
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: