<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 style="background-color: #ffffff; height:150px"> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <!-- Overlay --> <div class="overlay"></div> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item slides active"> <div class="slide-1"></div> <div class="hero"> <hgroup> <h3>Bienvenido a tufotoboda.com </h3> <h4>Sitio web de búsqueda de fotógraf@ para tu boda</h4> </hgroup> </div> </div> <div class="item slides"> <div class="slide-2"></div> <div class="hero"> <hgroup> <h4>Compara, elige, haz tu lista de favoritos y..</h4> </hgroup> </div> </div> <div class="item slides"> <div class="slide-3"></div> <div class="hero"> <hgroup> <h4>encuentra el(la) mejor fotógraf@ para tu día tan importante</h4> </hgroup> </div> </div> </div> </div> <button class="btn" role="button">See all features</button> <div style="background-image: url(http://lorempixel.com/400/200/city);height:200px"> </div>

/* Fade content bs-carousel with hero headers Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com Image credits: unsplash.com */ .carousel .item { left: 0 !important; -webkit-transition: opacity .4s; /*adjust timing here */ -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .carousel-control { background-image: none !important; /* remove background gradients on controls */ } /* Fade controls with items */ .next.left, .prev.right { opacity: 1; z-index: 1; } .active.left, .active.right { opacity: 0; z-index: 2; } /********************************/ /* Fade Bs-carousel */ /********************************/ .fade-carousel { position: relative; height: 90px; } .fade-carousel .carousel-inner .item { height: 90px; } .fade-carousel .carousel-indicators > li { margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active { width: 10px; height: 10px; opacity: 1; } /********************************/ /* Hero Headers */ /********************************/ .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #000000; 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; -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; } /********************************/ /* Overlay */ /********************************/ .btn { position: absolute; top: 50%; left: 50%; } *******************************/ /* Media Queries */ /********************************/ @media screen and (min-width: 980px){ .hero { width: 980px; } } @media screen and (max-width: 640px){ .hero h1 { font-size: 4em; } }