How to visually hide element using CSS?

Published: August 15, 2021Last updated: August 15, 2021css, display, hide, visually hide

Hiding a DOM element is quite simple and easy using CSS. There are a couple of different ways we can achieve this. The approach we need to use depends on the requirements.

In this post, we are going to discuss how to visually hide a DOM element using CSS.

Using CSS opacity property:

The opacity property determines the opacity level for an element. The opacity level describes the transparency level, where 1 is NOT transparent and 0 is completely transparent.

// Example:

selector {
opacity: 0;
}

Using CSS visibility property:

Whether an element is visible determines the visibility property. visibility: hidden; only visually hides the element. Hidden elements take up space on the page but we can’t see it.

// Example:

selector {
visibility: hidden;
}

Using CSS display property:

Display: none; Turns off the display and removes the element from the viewport. It takes up no space, although the HTML for it is still in the source code. All child elements have their displays off.

// Example:

selector {
display: none;
}

Using CSS transform property:

Transform property on an element can be used to scale, rotate, or skew translation. A scale (0) will hide the off-screen element:

// Example:

selector {
transform: scale(0);
}

Using CSS clip-path property:

The clip-path property creates a clipping zone that determines which parts of a component are visible. Using a value such as clip-path: circle (0); The element will be completely hidden.

// Example:

selector {
clip-path: circle(0);
}

Using CSS position property:

CSS Position How to determine the position of an element in a document. The top, right, bottom, and left features determine the final position of the stationary elements. Therefore an absolute position element can be moved off-screen with left: -999px or similar.

// Example:

selector {
position: absolute;
left: -999px;
}