I am trying to place an image that belongs to a bootstrap carousel on top of another carousel, that is, one carousel is positioned after the other but the image that contains the second one is positioned on top of the first.
Sounds a bit confusing, sorry if I'm wrong. I will attach an image to make it more visual:
To better see what I mean run it full page.
.carousel1,
.carousel-item,
.carousel-item.active {
height: 30rem;
background-color: white;
}
.carousel-inner {
height: 30rem;
}
.SlideHead1 .carousel-item.active {
background-color: black;
}
.SlideHead2 .carousel-item.active {
background-color: rgb(255, 255, 255);
}
h5.slide2{
font-size: 2.5rem;
color: rgb(255, 255, 255);
text-align: center;
}
p.slide2 {
font-size: 1rem;
color: rgb(255, 255, 255);
text-align: center;
}
h5.slide3{
font-size: 2.5rem;
color: rgb(0, 0, 0);
text-align: left;
}
p.slide3 {
font-size: 1rem;
color: rgb(0, 0, 0);
text-align: left;
}
img.crispi.img-fluid {
width: 19rem;
z-index: 99999;
transform: translateY(-150%);
position: absolute;
}
img.d-block.w-100.imagen-carrousel-centro{
opacity: 0.7;
filter: alpha(opacity=50);
}
/* carrousel inicio */
h5.slide-head {
font-size: 2.5rem;
color: rgb(0, 0, 0);
}
p.slide-head {
font-size: 1rem;
color: rgb(0, 0, 0);
}
a.slide-head {
color: rgb(0, 0, 0);
background-color: rgba(240, 248, 255, 0);
border: 1px solid white;
padding-left: 5rem;
padding-right: 5rem;
}
a.slide-head:hover {
color: white;
background-color: rgba(0, 0, 0, 0.141);
border: 1px solid white;
padding-left: 5rem;
padding-right: 5rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Slide 2 -->
<div class="row SlideHead1">
<div class="col-sm-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li> -->
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption slide1 d-md-block">
<div class="row">
<div class="col-sm-12">
<h5 class="slide2">Lorem Ipsum</h5>
<p class="slide2">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
<p class="slide2">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
<p class="slide2">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
</div>
</div>
</div>
</div>
<!-- <div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
<h5>...</h5>
<p>...</p>
</div> -->
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
<!-- END Slide 2 -->
<!-- Slide 3 -->
<div class="row SlideHead2">
<div class="col-sm-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li> -->
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption slide2 d-md-block">
<div class="row">
<div class="col-sm-6">
<h5 class="slide3">Lorem Ipsum</h5>
<p class="slide3">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
<p class="slide3">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
<p class="slide3">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
</div>
<div class="col-sm-6">
<img src="https://images.unsplash.com/photo-1657299170936-0531a116c87c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="crispi img-fluid fixed-overlay" alt="crispi">
</div>
</div>
</div>
</div>
<!-- <div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
<h5>...</h5>
<p>...</p>
</div> -->
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
<!-- END Slide 3 -->
Would anyone know how to do it correctly? Currently the image is not positioned on top of the first carousel.