"Carousel diff"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

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
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
/* -- 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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: