Image not clipping

Question

Basically, I photoshopped a frame out of an image and now I am trying to make an image fit inside that frame so that it looks like the image is inside the frame.

<>
  <div className="flex justify-center items-center text-center">
    <div className="z-20 relative overflow-hidden h-[640px] w-[460px] object-cover">
      <Image className="w-full h-full" alt="its a frame" src="/frame.png" height={400} width={400} />
    </div>

    <Image
      className="aspect-square object-cover absolute"
      alt="its a goddamn moon "
      src={"/Moon.png"}
      // layout="fill"
      height={600}
      width={600}
    />
  </div>
</>

Any suggestions?

Answer 1

You can try making one of them a div with properties "background-image: url()" and "background-size: cover" and then putting second image inside that div with width and height set to 100%. Then you should be able to adjust padding or border of the second one so that it looks like image is framed.