In theory, there is no way that you can put a hold into a container, it doesn’t make sense. But why I am trying to achieve it?
I was thinking about how I can create an image with several layers of transparency, each transparency would be accomplished with a div and an RGBA value different from another. inside the darkest div, I would put a hole so the image in the background would show through on its original color.
It’s amazing how many geniuses are out there. While as I said there is no classic way to achieve this but people have come up with so many different ways that are actually working.
One solution that I like more is that we add a thick border to the div inside and give that border a half transparent color. I’m going to try it.
Problem: Border doesn’t accept a percentage as the value, on that note outline doesn’t accept a percentage as well.
2 days later: It seems that clip-part is the way to go. I am going to try it.