overflow item on hover it hiddes

[viccabezos]

Hi i've been trying to find a solution for a thing it's happening.
inside my slider i have an hover effect that will move the item i little up and left, and i don't get to mek it show without adding lots of paddings to prevent the item to be hidden when overflowing.

on the following screenshot with the code below, i see that with the padding i can see the items when i hover, i have added overflow-visible in tailwind css styles and tried to add it in inline styling too, but if i delete de paddings overflow: visible does not seem to apply and my object will be cropped...

<Splide hasTrack={false} options={mergedOptions} style={{ overflow: 'visible' }} className=" overflow-visible bg-red-400 p-5" > <SplideTrack className="overflow-visible bg-blue-400 p-5" style={{ overflow: 'visible' }}> {items.map((item, i) => { return ( <SplideSlide className={cn('overflow-visible bg-orange-400 p-10', gapClassName)} key={i} style={{ overflow: 'visible' }} > {item} </SplideSlide> ); })} </SplideTrack> </Splide>

Here the same but without the paddings

return ( <Splide hasTrack={false} options={mergedOptions} style={{ overflow: 'visible' }} className=" overflow-visible bg-red-400 " > <SplideTrack className="overflow-visible bg-blue-400 " style={{ overflow: 'visible' }}> {items.map((item, i) => { return ( <SplideSlide className={cn('overflow-visible bg-orange-400 ', gapClassName)} key={i} style={{ overflow: 'visible' }} > {item} </SplideSlide> ); })} </SplideTrack> </Splide> );