body{
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #ddd;

}
.image-area{
   position: absolute;
   width: 540px;
   height: auto;
   display: flex;
   justify-content: center;
   align-items: center;

   
}

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

}

a img{
   position: absolute;
   left: 0;
   top: 0;
   width:540px;
   height:auto;
  


}

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

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