i will add a html, css and js belonging to a 3d hover effect codepen example and my grid view of my react app products list below. I want you to add the 3d hover effect to the image in figure( figure img:hover {}) on hover.Ensure if you provide any css to add to my styled section where figure img is, make sure it is separate and formatted as pure css as style.css. GridView.js: import React from "react";
import styled from "styled-components";
import Product from "./Product";
import { motion } from "framer-motion";
import { fadeIn } from "./variants";

const GridView = ({ products }) => {
    console.log('products: ', products);
  return (
    <Wrapper className="section">
      <motion.div 
        className="container grid grid-three-column"
        variants={fadeIn("up", 0.4)}
        initial="hidden"
        animate="show"
        exit="hidden"
      >
        {products.map((curElem) => {
          return <Product key={curElem.id} {...curElem} />;
        })}
      </motion.div>
    </Wrapper>
  );
};

const Wrapper = styled.section`
  padding: 2rem 0 15rem;
  }

  .container {
    max-width: 100% !important;
    padding-bottom: 150px;
  }

  .grid {
    gap: 3.2rem;
  }

  figure {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s linear;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      border-radius: 24px 24px 0px 0px;
      transition: all 0.2s linear;
      cursor: pointer;
    }
    &:hover::after {
      width: 100%;
    }
    &:hover img {
      transform: scale(1.06);
      margin-top: 1rem;
    }
    img {
      max-width: 90%;
      margin-top: 1.8rem;
      height: 20rem;
      border-radius: 10px;
      transition: all 0.2s linear;
    }
    .caption {
      position: absolute;
      top: 15%;
      right: 10%;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      background-color: #0000008c;
      color: #8bff74;
      padding: 0.25rem 1rem;
      font-size: 1rem;
      font-weight: bold;
      border-radius: 2rem;
    }
  }

  .card {
    background-color: white;
    box-shadow: rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, rgb(74, 0, 224, 0.06) 0px 2px 1px,rgb(74, 0, 224, 0.09) 0px 3px 1px, rgb(74, 0, 224, 0.09) 0px 8px 10px inset;
    border-radius: 24px;

    .card-data {
      padding: 0 2rem 2rem;
    }

    .card-data-flex {
      margin: 2rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-data--price {
      color: #000;
      font-weight: 600;
    }

    h3 {
      color: #4A00E0;
      font-weight: 600;
      text-transform: capitalize;
    }

    .btn {
      margin: 2rem auto;
      background-color: rgb(0 0 0 / 0%);
      border: 0.1rem solid rgb(98 84 243);
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        background-color: rgb(98 84 243);
      }

      &:hover a {
        color: #fff;
      }
      a {
        color: rgb(98 84 243);
        font-size: 1.4rem;
      }
    }
  }
  @media (max-width: ${({ theme }) => theme.media.mobile}) {
    figure img {
      transform: scale(1.11);
      width: 100%;
      margin-top: 4rem;
      margin-bottom: 2rem;
      height: auto;
      border-radius: 10px;
      transition: all 0.2s linear;
    }
    .card {
      padding: 1rem;
    }
  }
`;

export default GridView;   Html: <div id="tilt">
  <!--  Container for our block  -->
</div>
CSS: html {
 display: flex;
  justify-content: center;
  align-items: center;
  align-contents: center;
  height: 100%;
}

/* Styles for the tilt block */
#tilt {
  display: block;
  height: 200px;
  width: 300px;
  background-color: grey;
  margin: 0 auto;
  transition: box-shadow 0.1s, transform 0.1s;
  
  /*
    * Adding image to the background
    * No relation to the hover effect.
    */
  background-image: url(http://unsplash.it/300/200);
  background-size: 100%;
  background-repeat: no-repeat;
}

#tilt:hover {
  box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
  cursor: pointer;
}
JS: /* Store the element in el */
let el = document.getElementById('tilt')

/* Get the height and width of the element */
const height = el.clientHeight
const width = el.clientWidth

/*
  * Add a listener for mousemove event
  * Which will trigger function 'handleMove'
  * On mousemove
  */
el.addEventListener('mousemove', handleMove)

/* Define function a */
function handleMove(e) {
  /*
    * Get position of mouse cursor
    * With respect to the element
    * On mouseover
    */
  /* Store the x position */
  const xVal = e.layerX
  /* Store the y position */
  const yVal = e.layerY
  
  /*
    * Calculate rotation valuee along the Y-axis
    * Here the multiplier 20 is to
    * Control the rotation
    * You can change the value and see the results
    */
  const yRotation = 20 * ((xVal - width / 2) / width)
  
  /* Calculate the rotation along the X-axis */
  const xRotation = -20 * ((yVal - height / 2) / height)
  
  /* Generate string for CSS transform property */
  const string = 'perspective(500px) scale(1.1) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)'
  
  /* Apply the calculated transformation */
  el.style.transform = string
}

/* Add listener for mouseout event, remove the rotation */
el.addEventListener('mouseout', function() {
  el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'
})

/* Add listener for mousedown event, to simulate click */
el.addEventListener('mousedown', function() {
  el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)'
})

/* Add listener for mouseup, simulate release of mouse click */
el.addEventListener('mouseup', function() {
  el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)'
})