How to Hide HTML Elements in CSS

December 27, 2022 | by Arround The Web | No comments

How to Hide HTML Elements in CSS

There can be a situation, when you don’t want some content to appear on a web page. For instance, the web page components, such as the navigation bar, header, footer, and more. Moreover, sometimes while designing any specific section of our web application, we often need to hide some of the components. For the corresponding, there are many methods to hide HTML elements using CSS.

The outcome of this blog are:

How to Hide HTML Elements With CSS?

Many possible methods of CSS are used to hide HTML elements. Some of them are listed below:

display: none
hidden property
visibility: hidden
filter: opacity(0)
clip-path property
overflow: hidden
opacity: 0
transform: scale(0)
transparent
font-size

Let’s elaborate each of the above-mentioned methods one by one. But before that, we will create an HTML file for the demonstration.

Prerequisite: Create HTML Page

In the HTML file, inside the body element, first, add a “<div>” element. Inside this <div>, there are two paragraph tags, each associated with the unique id “first” and “second”, respectively:

<body>
<div>
<p id="first">
First Paragraph!
</p>
<p id="second">
Second Paragraph!
</p>
</div>
</body>

Method 1: Hide HTML Elements Using CSS “display: none” Property

The CSS “display” property with the value “none” removes the element and allows other elements to take its place. For instance, we want to hide the second paragraph. For this, the discussed CSS property is applied to it as shown below:

#second {
display: none;
}

“#second” refers to the div with id second.
“display” property is assigned the value “none”:

It can be seen that now the second paragraph is hidden:

Method 2: Hide HTML Elements Using “hidden” Property

Another method to hide the HTML element is to write the “hidden” attribute with the element as follows:

<div>
<p hidden>
First Paragraph!

</p>
<p>
Second Paragraph!
</p>
</div>

It can be observed that the first element is hidden:

Method 3: Hide HTML Elements Using CSS “visibility: hidden” Property

The CSS “visibility” property can also be utilized to just visually hide the element, in such a way that other elements cannot take their place. In the below example, the “visibility” property value is set as “hidden” for the first HTML element:

#first {
visibility: hidden;
}

The corresponding output can be seen from the below-given image:

Method 4: Hide HTML Elements Using CSS “filter: opacity(0)” Property

The filter applies transparency to the elements. In the example, the “filter” property is assigned value as “opacity(0)”, which means it will be completely transparent on the web page:

#second {
filter: opacity(0);
}

From the below screen, we can observe that the paragraph with id “second” is hidden:

Method 5: Hide HTML Elements Using CSS “clip-path: circle(0)” Property

The clip-path property indicates which part of the web page should be shown.

In the following example, the “clip-path” property having the value “circle(0)” indicates that no content is shown related to the added tag:

#first {
clip-path: circle(0);
}

Here is the output screen, representing that the second element is shown and the first paragraph is not visible:

Method 6: Hide HTML Elements Using CSS “overflow: hidden” Property

The “overflow” property is assigned the value “hidden” to control the content. As a result, flow is clipped, and the remaining content is hidden:

#second {
height: 0px;
width: 0px;
overflow: hidden;
}

First, set the height and width of the div id second as 0px.
The content will overflow from the specified area.
Then, the “overflow” property is assigned the value “hidden” to hide the content.

From the below output, we can see the second element is not visible:

Method 7: Hide HTML Elements Using CSS “opacity: 0” Property

The opacity level is the element’s transparency level. The “opacity” property with the value “0” means the element will be fully transparent:

#first {
opacity: 0;
}

Output

Method 8: Hide HTML Elements Using CSS “ transform: scale(0)” Property

The “scale()” function resizes the element horizontally and vertically. The scale(0) value of the “transform” property indicates the element is sized to zero means it’s hidden:

#first {

transform: scale(0);
}

Output

Method 9: Hide HTML Elements by Applying Properties With “transparent” Effect

Let’s make the second element fully transparent. For this, assign the “background-color” and “color” property values as “transparent”:

#second {
background-color: transparent;
color: transparent;
}

The second element is fully transparent as compared to the first one. That’s why it cannot be seen on the screen:

We have explained some of the possible CSS methods to hide HTML elements.

Conclusion

CSS allows us to use different properties to hide the HTML elements. These properties include “display: none”, “hidden”, “visibility: hidden”, “filter: opacity(0)”, “clip-path: circle(0)”, “overflow: hidden”, “opacity: 0”, “transform: scale(0)”, or applying other properties such as color with the “transparent” effect. This blog discussed the procedures for hiding HTML elements using CSS.

Source: linuxhint.com