DEV Community

Cover image for CSS Trick to Create Hole on HTML Element
Weerayut Teja
Weerayut Teja

Posted on • Originally published at wteja.com on

2

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.

CSS3 Trick to Create Hole on HTML Element

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>
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay