I am using react slick slider for displaying movie cards. When I hover on a specific card the arrows of the slider and the content below the slider moves downwards. On hover, I also increase the width and height of the card so that I can display the extra content in it. Here is the code for the slider.
<Slider {...settings} >
{videosData?.map((vid, index) => {
return (
<ListItem
index={index}
imgUrl={vid?.thumbnail}
trailer={vid?.trailer}
genre={vid?.genre}
grossRating={vid?.grossRating}
/>
);
})}
</Slider>Here is the code for the card
const [isHovered, setIsHovered] = useState(false);
<div
style={{
// left: index * 225 - 50 + index * 2.5,
position: relative,
transform: isHovered && 'scale(1.1)',
transition: isHovered && ' transform 0.3s linear',
height: isHovered && '370px',
width: isHovered && '350px',
top: isHovered && '-120px',
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{!isHovered ? (
<img src={imgUrl} />
) : (
<>
<Stack>
<Stack height={'100%'} w={'100%'}>
<video
src={trailer}
autoPlay={true}
loop
// muted={true}
// preLoad="auto"
/>
</Stack>
<Stack p={5} gap={2} mt={'170px !important'}>
<HStack justifyContent={'space-between'}>
<HStack>
<IoIosPlayCircle color="#e5e5e5" size={40} />
<Tooltip
label="Add to My List"
placement="top"
hasArrow
arrowSize={10}
bgColor={'#e5e5e5'}
color={'black'}
fontSize={'md'}
px={3}
py={1}
>
<Box>
<AiOutlinePlusCircle color="#e5e5e5" size={40} />
</Box>
</Tooltip>
<Box border={'2px solid #e5e5e5'} borderRadius={'full'} p={2}>
<IoIosThumbsUp />
</Box>
</HStack>
{/* Episodes Modal */}
<Modal />
</HStack>
<HStack>
<Text color={'#46d369'} fontSize={'md'} fontWeight={'bold'}>
96% Match
</Text>
<Text border={'1px solid #ffffff66'} px={2} fontWeight={'bold'}>
{grossRating}
</Text>
<Text color={'#fff'} fontSize={'md'} fontWeight={'bold'}>
20 Episodes
</Text>
<Text
border={'1px solid #ffffff66'}
fontSize={'xs'}
fontWeight={'bold'}
px={1}
borderRadius={'md'}
>
HD
</Text>
</HStack>
</div>
)
}I have tried giving absolute position to the card on hover but it does not let me increase the height and width of the card more then its parent.