i'm creating site in bootstrap (3.3.5 or whatever latest version is) , i'm using carousel feature fade between background images on 1 of pages.
firstly i'm using css adjust bootstrap carousel fade out , in, instead of sliding.
.carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; } .carousel-fade .carousel-inner .active { 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; } @media , (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); 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); 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); transform: translate3d(0, 0, 0); } } my problem is, have thing positioned absolute, on top of carousel. carousel switches between images, things on top of fade out , in. isn't want happen.
my html:
<div class="big-banner"> <div class="carousel slide carousel-fade" id="carousel-home" data-ride="carousel1"> </div> <!-- carousel --> <div class="container"> </div> <!-- /.container --> </div> <!-- /.big-banner --> the stuff in .container have placed on carousel.
anyone know solution?
add z-index:1000; .overlay. updated fiddle. reason b/c though have absolute , not inside carousel, both on same "level", , z-index comes play.
.overlay { position: absolute; top: 0; left: 0; z-index:1000; } 
Comments
Post a Comment