0

Tengo un problema, quisiera crear un carrusel de cards, similar a lo que hay en la plataforma de prime video. Quiero hacer que cuando se posicione el mouse y se realice el efecto hover, que se agrande la card sobresaliendo del contenedor sin desplazar el contenido de abajo, mostrando la descripción de la pelicula. El carrusel que uso es de la pagina https://swiperjs.com/

Quise resolverlo de la siguiente forma, usando el overflow-x: hidden para evitar que se haga el scroll horizontal por el carrusel, y luego usar el overflow-y: visible, para que el contenedor absolute, pueda sobresalir y estar encima de los demás objetos.

Pero lo que estuve viendo, al usar ambas, el overflow: visible, automáticamente lo cambia por "auto". La verdad no se si es la mejor solución para este tipo de problema usar overflow o si hay alguna mejor opcion, necesitaría ayuda.

la siguiente imagen es para que se entienda un poco mejor lo que quisiera hacer, lo que esta remarcado en rojo

introducir la descripción de la imagen aquí

el carrusel donde llama la card, los swipper que figuran son de la pagina swipper js

introducir el código aquí
return (
    <Fragment>
        <Swiper
            slidesPerView={5}
            centeredSlides={false}
            keyboard={{
                enabled: true,
            }}
            breakpoints={{
                769: {
                    slidesPerView: 5,
                    slidesPerGroup: 5,
                },
            }}
            navigation={true}
            autoplay={true}
            modules={[Keyboard, Navigation ]}
            className="mySwiper"
        >
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
            <SwiperSlide>
                <CardCarousel/>
            </SwiperSlide>
        </Swiper>
    </Fragment>
); }; export default Carousel;

el componente CardCarousel

introducir el código aquí

return (
    <Fragment>
            <div className='contenedor'>

                <img src={imagenes.apex} alt="" />
                <div className='tarjeta-cuerpo'>
                        <p className='card-desc'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, suscipit.</p>
                </div>
            </div>
    </Fragment>
); };export default CardCarousel;

el css

/*carrusel*/
.mySwiper {
    background-color: antiquewhite;
    padding: 30px 55px !important;
    overflow-x: hidden;
    overflow-y: visible !important;
}

.contenedor img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}

.swiper-button-prev,
.swiper-button-next {
    padding: 30px;
    color: white !important;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}

/*Cards*/
.tarjeta-cuerpo {
    display: none;
    background-color: rgb(64, 63, 63);
    color: white;
    z-index: 1000;
    position: absolute;
}

.contenedor:hover .tarjeta-cuerpo {
    display: block;
}

.contenedor {
    transition: all 0.3s;
    margin-right: 10px;
}

2
  • 1
    necesitamos ver el código para reproducir tu problema y poder ayudarte fácilmente. Commented el 26 mar. 2023 a las 4:31
  • @Cris223511.dev me olvide de ponerlo, ahi lo volvi a editar para poner el codigo Commented el 27 mar. 2023 a las 4:24

2 respuestas 2

1

si llegan a tener el mismo problema, al final de todo la solucion era solamente poner el "z-index:auto" y se soluciona todo el problema, sumando a lo del overflow:hidden en el contenedor padre y en el hijo el overflow:visible

0

pude resolverlo el problema anterior, en él cual el overflow ignoraba el código y se ponia en "overflow-auto", encontre la solucion con un caso similar al mío, en el que lo resolvía con un contenedor padre que contenga al carrusel. poniendo la propiedad "overflow-hidden" en el padre, y en el hijo ósea el carrusel "overflow-visible" en mi caso use el body como contenedor-padre, me pareció mas cómodo por el height.

Ahora el siguiente problema que me surge, es que si creo 2 carousel-card, no se superpone ya que son 2 el mismo componente y no puedo usar el "z-index". Muestro el codigo y la imagen de como se ve las card con el contenido tapado y de como quiero que se vea:

código donde llamo al componente 2 veces

introducir el código aquí
return (
    <Fragment>
        <section className='mt-5 position-relative'>
            <h2 className='ms-5 display-6 fw-bold'>Seguir viendo</h2>
            <Carousel></Carousel>
            <Carousel></Carousel>
        </section>
    </Fragment>);

agrego una imagen de como se ve

introducir la descripción de la imagen aquí

por lo que vi al poner un div que contenga al componente, se resuelve lo que quiero hacer

introducir el código aquí
return (
    <Fragment>
        <section className='mt-5 position-relative'>
            <h2 className='ms-5 display-6 fw-bold'>Seguir viendo</h2>

            <article className='index'>
                <Carousel></Carousel>
            </article>
            <Carousel></Carousel>
            
        </section>
    </Fragment>
);

introducir la descripción de la imagen aquí

lo único que agrego en la clase "index" es

.index{
    z-index: 100;
    position: relative;
}

mi pregunta al final para resumir, es como puedo hacer para que se superponga el carousel de arriba con el de abajo, como sucedió en la segunda imagen. para que cuando haga el hover no se desplace o lo tape.

Ya que quiero poner mas carrusel con distintos tipos de categoría, posiblemente de forma dinámica. espero que se pueda entender a lo que me refiero, porque estoy bloqueado y no se como continuar

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.