Framer motion scale and translate in place

Question

I'm trying to replicate the following effect (the link is provided jest below) using framer motion. However, I didn't not succeed.

Hover effect

The thing is, I did scale and translate the image correctly, but the image "move out" of the div, it doesn't "stay" within the div like in the link above.

Here's my code:

import { FC } from "react";
import { motion } from "framer-motion";
import { Grid, Typography } from "@mui


export default function Main() {
  const list = [
    {
      title: "abc",
      url: "www.example.com",
      image:
        "https://images.unsplash.com/photo-1488972685288-c3fd157d7c7a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
    },
    {
      title: "klm",
      url: "www.example.com",
      image:
        "https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
    },
    {
      title: "ost",
      url: "www.example.com",
      image:
        "https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
    },
    {
      title: "xyz",
      url: "www.example.com",
      image:
        "https://images.unsplash.com/photo-1598818384697-62330d600309?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
    },
  ];

  const imgMotion = {
    initial: {
      transform: "scale(1, 1)",
    },
    hover: {
      transform: "translate(50%, -50%) scale(0.5, 0.5)",
      transition: {
        duration: 0.3,
        type: "tween",
        ease: "easeIn",
      },
    },
  };

  return (
    <div>
      <Grid container rowSpacing={4} columnSpacing={2} justifyContent="center">
        {list.map((item, i) => (
          <Grid item key={i} lg={6} md={6} sm={6} xs={6}>
            <motion.div
              initial="initial"
              animate="initial"
              whileHover="hover"
              whileTap="hover"
              style={{
                width: "100%",
                height: "30vh",
                border: "4px solid var(--secondary)",
                position: "relative",
              }}
            >
              <motion.div
                variants={imgMotion}
                style={{
                  height: "100%",
                  width: "100%",
                  backgroundImage: `url(${item.image})`,
                  backgroundSize: "cover",
                  backgroundPosition: "center center",
                  zIndex: "10",
                  position: "absolute",
                }}
              />
              <div />
              <a href={item.url}>
                <Typography>More</Typography>
              </a>
            </motion.div>
          </Grid>
        ))}
      </Grid>
    </div>
  );
}