<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.