0
J'ai ce carrousel et je ne peux pas obtenir de superposition pour être sous le texte du héros.Comment montrer un div sur un autre?
est ici le code html/css:
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 850px;
}
.fade-carousel .carousel-inner .item {
height: 1000px;
}
.fade-carousel .carousel-indicators>li {
width: 15px;
height: 15px;
margin: 0 2px;
background-color: rgba(0, 0, 0, 0);
border-color: #fff;
border-width: 3px;
}
.fade-carousel .carousel-indicators>li.active {
background-color: #fff;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
text-align: center;
text-transform: uppercase;
-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 */
/********************************/
.overlay {
position: absolute;
width: 100%;
z-index: 2;
height: 1000px;
background-image: url(../img/dotspattern.png);
background-attachment: fixed;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {
padding: 10px 40px;
}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.fade-carousel .slides .slide-1 {
background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818);
}
.fade-carousel .slides .slide-2 {
background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .slides .slide-3 {
background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px) {
.hero {
width: 980px;
}
}
@media screen and (max-width: 640px) {
.hero h1 {
font-size: 4em;
}
}<div class="container-fluid custom-fluid">
<!-- Overlay -->
<div class="overlay"></div>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="6000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<h1>We are creative</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<hgroup>
<h1>We are smart</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<hgroup>
<h1>We are amazing</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
</div>
</div>
</div>Je veux que mon texte dans la diapositive pour montrer sur le motif de superposition, mais ne peut pas obtenir le code pour le faire. Merci d'avance!
je l'ai déjà essayé. Ça ne marche pas. voici la capture d'écran https://drive.google.com/file/d/0B670wUE-NP5zaEpUUWNUb3FJRWM/view?usp=drivesdk –