body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: #ddd;
}
.image-area {
width: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
mix-blend-mode: normal;
pointer-events: none;
user-select: none;
margin: auto;
}

.a {
position: absolute;
width: auto;
height: 100%;
display: flex;
box-shadow: 0 5px 40px rgba(0, 0, 0, 6);
}

a img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: auto;
height: 100%;
margin: auto;
}

a img:nth-child(2) {
clip-path: circle(15% at var(--x) var(--y));
}

a:hover img:nth-child(2) {
clip-path: circle(15% at var(--x) var(--y));
}