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