<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 ---------->
<div class="masthead">
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner carousel-zoom">
<div class="active item">
<div class="carousel-caption">
<h2>Title</h2>
<p>Description</p>
</div>
<div class="slide-1"></div>
</div>
<div class="item">
<div class="carousel-caption">
<h2>Title</h2>
<p>Description</p>
</div>
<div class="slide-2"></div>
</div>
<div class="item">
<div class="carousel-caption">
<h2>Title</h2>
<p>Description</p>
</div>
<div class="slide-3"></div>
</div>
</div>
</div>
</div>
/* Masthead (Header) */
.masthead{
display: table;
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
/* background: transparent url("https://soldierupdesigns.com/img/bg.jpg") no-repeat fixed 0px 0px / cover; */
z-index: 1000;
background-color:#fff;
margin-left:auto;
margin-right:auto;
}
/*
inspired from http://codepen.io/Rowno/pen/Afykb
& https://jsfiddle.net/q0rgL8ws/
*/
.carousel-fade .carousel-inner .item{
opacity: 0;
transition-property: opacity;
overflow:hidden;
}
.carousel-fade .carousel-inner .active .slide-1,
.carousel-fade .carousel-inner .active .slide-2,
.carousel-fade .carousel-inner .active .slide-3{
transition: transform 6000ms linear 0s;
/* This should be based on your carousel setting. For bs, it should be 5second*/
transform: scale(1.05, 1.05);
opacity: 1;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .slide-1,
.carousel-fade .carousel-inner .slide-2,
.carousel-fade .carousel-inner .slide-3{
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
transition-property: opacity;
overflow:hidden;
}
.carousel-fade .carousel-inner .slide-1 {
background-image: url(https://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1200);
opacity:1;
}
.carousel-fade .carousel-inner .slide-2 {
background-image: url(https://images.unsplash.com/photo-1445280471656-618bf9abcfe0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1200);
opacity:1;
}
.carousel-fade .carousel-inner .slide-3 {
background-image: url(https://images.unsplash.com/photo-1445462657202-a0893228a1e1?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1200);
opacity:1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
