'adding an hover effect for each item in a mapped variable

I have this variable with items

const tabContent = [
{
    Describtion1 : "Chief. Mordy Wenk",
    Describtion2 : "ChiefDescribtion-1",
     Title : "Head of the Chief staff.",
    Img : "https://user-images.githubusercontent.com/86873404/156891438-ab14a39b-53a9-4940-892c-b0bbe74d6acf.png"
},{
    Describtion1 : "Chief. Mark Brunnett",
    Describtion2 : "ChiefDescribtion-2 ",
     Title : "Junior chef.",
    Img : "https://user-images.githubusercontent.com/86873404/165656553-7f853d16-ac1b-4880-ad5e-7943767811e5.png"
},{
    Describtion1 : "Chief. Griffin Zach",
    Describtion2 : "ChiefDescribtion-3",
     Title : "a Talented Chef.",
    Img : "https://user-images.githubusercontent.com/86873404/165656971-8911df46-68a3-4311-ab75-c57e57ba5e19.png"
},{
    Describtion1 : "Chief. Will Smith",
    Describtion2 : "ChiefDescribtion-4",
     Title : "a Talented Chef.",
     Img : "https://user-images.githubusercontent.com/86873404/165657351-cb095c73-588e-49bd-a4ce-119ff721a3ed.png"
    }]

then I used a useState to make a rotate effect whenever I hover on the container

    const [pizzaMoves, setPizzaMoves] = useState({transform:"translate(40px,0)"})
    const [pizzaMoves2, setPizzaMoves2] = useState({transform:"translate(-40px,0)"})

and I mapped over it like this

{tabContent.map(item => (
            <Center>
                <SwiperSlide>
            <Box 
            borderRadius={"50%"}
            onMouseEnter={e => {
                setPizzaMoves2({transform:"translate(10px,0) rotate(90deg) scale(1.1)"})
            }}
            onMouseLeave={e => {
            setPizzaMoves2({transform:"translate(-40px,0)"})
        }}>
                <Box
                onMouseEnter={e => {
                    setPizzaMoves({transform:"translate(-10px,0) rotate(90deg) scale(1.1)"})
                }}
                onMouseLeave={e => {
                    setPizzaMoves({transform:"translate(40px,0)"})
                }}
                w="400px"
                borderRadius={"30px 30px 0% 0%"}
                boxShadow="rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"
                transition="0.3s"
                _hover={{ transform:"scale(1.025)",
                    boxShadow:"rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;"}}
                marginTop={"80px"}
                backgroundColor="#461111" 
                backgroundImage="https://www.transparenttextures.com/patterns/gradient-squares.png"
                >
                    <Box 
                    boxShadow={"rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"}
                    borderRadius={"30px 30px 0% 0%"}
                    p="0px 30px"
                    backgroundColor="#050200"
                    w="100%"
                    backgroundImage="https://www.transparenttextures.com/patterns/gradient-squares.png"
                        >
                        <HStack justifyContent={"center"} align={"flex-end"}>
                            <Image w="75px" style={pizzaMoves2} transition="0.3s ease"
                            transform={"translate(-40px,0)"} src="https://user-images.githubusercontent.com/86873404/166059070-6a6826b1-0ef2-43f4-b242-0da7e3abeff6.png"/>
                            <Image w="150px" borderRadius={"50%"} src="https://user-images.githubusercontent.com/86873404/165981282-19b7041f-26c7-40e5-94a5-d61f305bf8a2.png"/>
                            <Image w="75px" style={pizzaMoves} transition="0.3s ease"
                            src="https://user-images.githubusercontent.com/86873404/166059070-6a6826b1-0ef2-43f4-b242-0da7e3abeff6.png"/>
                        </HStack>
                    </Box>
                    <VStack p="30px">
                        <HStack>
                        <Text 
                        fontSize={30}
                        fontFamily={"'Josefin Sans', sans-serif;"}
                        color={"white"}
                        >{item.Describtion1}</Text>
                        </HStack>
                        <Text fontFamily="'Boogaloo', cursive;" fontSize={"18px"}
                        color="#fff700">
                            {item.Title}
                        </Text>
                        <Text
                        color={"white"}
                        w="300px"
                        fontFamily={"'Josefin Sans', sans-serif;"}
                        >
                            {item.Describtion2}
                        </Text>
                        </VStack>
                </Box>
                </Box>
                </SwiperSlide>
                </Center>
        ))}

so like this , whenever I hover on the container It rotates all the images not only the image that I hovered its' container, so how can I be able to only do one image at a time?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'adding an hover effect for each item in a mapped variable

Sources

Related Questions