Clip-path, the way to go to reverse cut.

As I mentioned in another post I am trying to find a way to make a hole inside a container. Imagine you have an image and you put a div over that image and there is a hole inside that covering div so that you can see part of the image through it. Now adding some simple jQuery that hole could jump up and down, right and left. 

First problem: What I need is cropping a container from inside and not outside the element. Clip-path is very easy to use for cropping the outside area of an image/container but doesn’t have a native reverse clipping tool.

Solution: Actually we can crop inside of an image by clip-path, it just needs a bit of imagination and maybe a geometry-friendly mind.

And this is the result As you can see with clip-path we can easily simulate a hole inside an element. I wish it was a little easier to make the hole circle or other shapes, it is possible but needs lines of lines of CSS code.

Clip-path, the way to go to reverse cut.

Leave a Reply

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