Estoy tratando de colocar una imagen que pertenece a un carrusel de bootstrap encima de otro carrusel, es decir que quede un carrusel posicionado después del otro pero la imagen que contiene el segundo quede posicionada encima del primero.
Suena un poco lioso, disculparme si me explico mal. Adjuntaré una imagen para que sea más visual:
Para ver mejor a lo que me refiero ejecutarlo a página completa.
.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 -->
¿Alguien sabría cómo hacerlo correctamente? Actualmente la imagen no se posiciona encima del primer carrusel.