Hi there I am messing around with Html and css and was wondering if anyone knew how to do a kinda specific thing or if it was even possible or if I would have to go about it another way.
I wanted to make a sort of pop out effect using two images. where one image looks like it is popping out of the other. the only thing is one of the images I am using as a mask and filling it in as a background color(I don't know if that effects anything.) and it has sort of a complex border and I would like the border to cleanly cut off/mask the image that I want to put ontop/coming out of it.
I kinda tried with overflow: hidden after looking up some tutorials but that only seems to make a box and it doesn't really look the way I'd like. the other tutorial I found kinda makes it perfectly but again has a clean cut.
I'll attach the image I'd like to act as the "Hole"/ cut off/mask.
New to this and I am probably missing something so if anyone can point me in the right direction I'd really appreciate it.
Create an animated pop-out effect // HTML & CSS
Edit:
I made a code pen and copied the code that I had and am working on. most of it is trial and error and probably messy/not good practice. everything has a border to help me visualize stuff as well.