Having a hole in a container

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.

Leave a Reply

Your email address will not be published. Required fields are marked *