1

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:

introducir la descripción de la imagen aquí

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.

1 respuesta 1

1

quizá deseas algo así:

<style>
  .carousel1,
.carousel-item,
.carousel-item.active {
    height: 30rem;
    background-color: white;
}

.carousel-inner {
    height: 30rem;
    overflow:visible !important;
}

.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;

}
</style>

<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 id="imgx" 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 -->

Solo debes agregar en tus estilos, la propiedad overflow:visible en la clase .carousel-inner{}, quedando de esta forma:

.carousel-inner {
        height: 30rem;
        overflow:visible !important;
    }
1
  • Disculpa la tardanza en responder, me ha servido muchisimo justo era lo que necesitaba, porque se añadiria overflow visible? Tal vez en un futuro requiera de usarlo nuevamente, pero no termino de entenderlo. Gracias
    – Sara11
    Commented el 12 ago. 2022 a las 7:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.