CSS Trick to Create Hole on HTML Element

Hello guys, in this tutorial I will show you how to create the overlay hole on images background using only CSS3. Let take a look at sample below.

See the Pen Make a Hole on Background Overlay with Pure CSS3 by Weerayut Teja (@wteja) on CodePen.

Okay let get started !

By default there is no option to make a hole on HTML element using CSS3. But we can make something look “similar” to the hole. By create round element and make it use transparent background color and add color to its huge border instead. This is the solution for it (and for now).

First we create a box with background image. I decide to use dummy image from https://placeimg.com as an example.

<div class="container">
    <div class="box">
    </div>
</div>

Then add style to .box to show the background image use placeimg dummy image. I fixed width and height to 600px X 400px.

I set position to relative because I plan to make a hole on top and central of background image.

The key is we must set overflow: hidden; Because we will use it to hide the hole’s border that exceed the .box

.box {
    /* Background */
    background-image: url(https://placeimg.com/640/480/nature);
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    /* Position */
    position: relative; width: 600px; 
    height: 400px; 
    /* Box settings */ 
    overflow: hidden; 
    display: inline-block; 
}

Then to make the overlay with hole without adding additional HTML element. I decided to use ::after pseudo selector instead.

I added some blue background color and move it to center with position: absolue; top: 50%; left: 50%; transform: translate(-50%, -50%); with this technique this element will align to middle of parent element. Don’t forget to add z-index: 2; to make sure it will be floated on top of background image.

Set height to 0, width to 50% and set padding-bottom to 50% as well. So it will be square shape because when we set padding as the percentage, it will reference to parent width. So If we set both width and padding-bottom to the same value we will get square shape element. We don’t need height because we want to reference by parent’s height only.

Then we make it round as the circle by adding border-radius: 50%

The key of “hole” overlay if I let it transparent and has no content. But set a huge border that exceed over the edge of parent element. Let take a look at sample CSS code below. I use 400px border width to make sure it exceed .box edge. I also adding blur effect to .box that also has class .blur to make the hole softer and tender.

.box::before {
    content: "";
    display: block;
    /* Scale */
    width: 50%;
    padding-bottom: 50%;
    /* Position */
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    /* Border */
    border: solid 400px rgba(31, 44, 122, 0.5);
    border-radius: 50%;
}
.box.blur::before {
    filter: blur(20px);
}

Let make it more fun with CSS transition on mouse over. by increase width & padding-bottom on mouse over, and make it smoother with some transition setting. Let see the example below.

See the Pen Zoom Out Hole Background Overlay with Pure CSS3 by Weerayut Teja (@wteja) on CodePen.

I hope this guide will be useful for you. I also hope in nearly future, CSS will be able to make actual hole with ease than we hack it like this. If you have the more recommend solution, please post on the comment box below to let other developers hear about it.

Happy coding!