<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 100 120" width="213" class="image">
  <title>This is an image title</title>
  <desc>This is an image description</desc>
  <defs>
    <clipPath id="maskImage" clipPathUnits="userSpaceOnUse">
      <path d="M100 63A50 50 0 110 70C0 42 20 0 48 0c27 0 52 42 52 70z" />
    </clipPath>
    <clipPath id="maskBackground" clipPathUnits="userSpaceOnUse">
      <path d="M190 101a50 50 0 01-50 50 50 50 0 01-50-50 50 50 0 0150-50 50 50 0 0150 50z" />
    </clipPath>
  </defs>
  <!-- Background image -->
  <g clip-path="url(#maskImage)" transform="translate(0 -7)">
    <image clip-path="url(#maskBackground)" width="120" height="120" x="70" y="38" href="https://res.cloudinary.com/dazdt97d3/image/upload/v1615813805/background.png" transform="translate(-90 -31)" />
  <!-- Foreground image -->
    <image width="120" height="144" x="-15" y="0" fill="none" class="image__foreground" href="https://res.cloudinary.com/dazdt97d3/image/upload/v1615813805/foreground.png" />
  </g>
</svg>

/* Required styles */

.image {
  transform: scale(0.9, 0.9);
  transition: transform 0.2s ease-in;
}

.image__foreground {
  transform-origin: 50% 50%;
  transform: translateY(4px) scale(1, 1);
  transition: transform 0.2s ease-in;
}

.image:hover {
  transform: scale(1, 1);
}

.image:hover .image__foreground {
  transform: translateY(-7px) scale(1.05, 1.05);
}

/* Optional styles (decoration) */

body {
  padding: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px; /* Change this to any px value */
  margin: 0 auto;
  min-height: calc(100vh - 100px);
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

// Credit goes to original idea that uses clip-path:path() which is not fully supported and is not responsive. I wanted to recreate the effect and make it responsive and use fully-supported features.
// https://twitter.com/mikaelainalem/status/1358492344602025985