Here are the two image layers:
https://i.sstatic.net/lUUQC.jpg
One shows a hand holding a phone, and the other is a black hole.
This is how you can achieve it using HTML markup:
<div class="wrapper">
<img class="wrapper__image" src="path/to/image.png">
</div>
And here's the SCSS code for styling:
.wrapper {
background: url("path/to/blackhole.png") no-repeat center bottom;
width: 528px;
height: 600px;
overflow: hidden;
&__image {
margin-left: 60px;
margin-top: 5px;
}
}
The challenge arises from the rounded corners on both images. If we push the hand image below the edge of the wrapper div to hide it in the black hole, there will be visible gaps at the bottom due to the rounded shapes.
Is there a way to strategically position the hand image below the black hole without revealing any transparent corners?
https://i.sstatic.net/gdaKl.png
If the black hole were square instead of round, this issue could be easily resolved.
The goal is to create an illusion of the hand with the phone sliding down into the black hole seamlessly.