`

import React from ‘react’
import { motion } from ‘framer-motion’

const Card = ({ classValue, image, index, midIndex }: { classValue: string, image: string, index: number, midIndex: number }) => {

return (

    <motion.img
        className={classValue}
        src={image} alt="card"
        key={index}
        initial={{
            position: "absolute",
            height: "100%",
            transformOrigin: "50% 100%",
            transform: `translateX(${(index - midIndex) * 2.5}rem) rotate(${(index - midIndex) * 10}deg)`,

        }}
        whileHover={{
            scale: 1.3
        }}
        animate={{
            position: "absolute",
            height: "100%",
            transformOrigin: "50% 100%",
            transform: `translateX(${(index - midIndex) * 2.5}rem) rotate(${(index - midIndex) * 10}deg)`,
        }}
        transition={{
            duration: 1
        }}
    />

)

}`

The stylings specified in initial are implemented successfully, but whileHover does not do anything