How to Use Divs to Grab Users Attention Without Overflowing Window?

In HTML, the div tag is also known as the division tag in HTML. HTML uses the div tag to create content divisions in web pages such (text, images, header, footer, navigation bar, etc).

It is required to close the div tag, which has an opening (<div>) and closing (</div>) tag. Because it makes it easier to break off material on a web page, the Div element is the most useful one in web development.

Let’s dive into the article for getting better understanding on using the div to grab user’s attention without overflowing window.

Using div to grab user attention without overflowing window

When an element's content is too large to fit within a designated space, the overflow property in HTML determines whether to clip it or add scrollbars. Only block elements with a specified height can use the overflow feature.

Let's look at some examples of how to grab users' attention without overflowing the window using div to learn more −


In the following example, we are running the script and creating an animation to grab the user's attention.

<!DOCTYPE html>
   <body style="background-color:#EAFAF1">
         .tutorial::before {
            content: "";
            pointer-events: none;
            border-radius: 45%;
            border: 11px solid #7D3C98;
            position: absolute;
            animation: attention 2s cubic-bezier(1,0,.1,0) infinite;
         @keyframes attention {
            40%,to {
               transform: scale(5);
               opacity: 0;
      <p><a href="" class="tutorial">
         Click To Open..!

When the script gets executed, it will generate an output consisting of a link displayed on the webpage along with an animated ring that plays around the ring with a timer.

Updated on: 20-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started