<figure>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 100 120" class="image" aria-hidden="true">
    <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>

  <!-- SEO and a11y fallback image -->

  <img src="https://res.cloudinary.com/dazdt97d3/image/upload/v1615813734/fallback.png" alt="This is a detailed image description" loading="lazy" class="fallback-image" />
</figure>
/* 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);
}

@media (prefers-reduced-motion: no-preference) {
.fallback-image {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
  } 
}

@media (prefers-reduced-motion) {
  .image {
    display: none;
  }
}

/* Optional styles (decoration) */

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

figure {
  flex-basis: 100%;
  margin: 0;
}


html {
  box-sizing: border-box;
}

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

img {
  max-width: 100%;
  display: block;
}
// 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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.