The with of information box at each movie box is looks weird.

Because that box ignore the gab of between movie image as below.

Also super weird thing is the information box(include the movie title) size is gonna big when mouse on top as below. I think is due to hover animation of box.

And I gave the position: relative to Box element, because its parent of Info element. Also I gave the position: absolute to Info element as below.

normal state

code

const Box = styled(motion.div)<{ bgPhoto: string }>`
    background-image: url(${(props) => props.bgPhoto});
    background-size: cover;
    background-position: center center;
    height: 200px;
    font-size: 60px;
    color: black;
    position: relative;

    &:first-child {
        transform-origin: center left;
    }
    &:last-child {
        transform-origin: center right;
    }
`;

const boxVariants = {
    normal: {
        scale: 1,
    },
    hover: {
        zIndex: 99,
        y: -20,
        scale: 1.3,
        transition: {
            delay: 0.5,
            duration: 0.2,
            type: "tween",
        },
    },
};

const Info = styled(motion.div)`
    padding: 10px;
    color: ${(props) => props.theme.white.darker};
    background-color: ${(props) => props.theme.black.lighter};
    opacity: 1;
    position: absolute;
    width: 100%;
    bottom: 0;
    h4 {
        text-align: center;
        font-size: 18px;
    }
`;

const infoVariants = {
    hover: {
        opacity: 1,
    },
};

jh0152park / ReactJS_Netflix

The width of information box at movie box each is looks weird. #16

normal state

code