CSS Trick to Create Hole on HTML Element
Tags: css
Published: 2021-05-25 03:44:56

---
title: CSS Trick to Create Hole on HTML Element
published: true
date: 2018-12-18 02:13:50 UTC
tags: css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yewdhp9zhzixnydy417.png
---

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.

![CSS3 Trick to Create Hole on HTML Element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yewdhp9zhzixnydy417.png)

See the Pen[ Make a Hole on Background Overlay with Pure CSS3](https://codepen.io/wteja/pen/wYaqdw/) by [Weerayut Teja (@wteja)](https://codepen.io/wteja) on [CodePen](https://codepen.io).

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](https://codepen.io/wteja/pen/jePLZr/) by [Weerayut Teja (@wteja)](https://codepen.io/wteja) on [CodePen](https://codepen.io).

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!