You can hide an element in CSS using the CSS properties display: none or visibility: hidden. display: none removes the entire element from the page and mat affects the layout of the page. visibility: hidden hides the element while keeping the space the same. but there is a total of 8 ways to hide elements in CSS.
1.The opacity: N and filter: opacity(N) properties can be passed a number between and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly but a fully transparent element remains on the page and can trigger events.
opacity: 0;
/*
alternatively
opacity: 0%;
filter: opacity(0%);
*/
2. Applying a zero alpha channel using rgba(0,0,0,0) or similar renders an item fully transparent.
color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
3. A scale (0) or translate(-999px, Opx) off-screen will hide the element.
transform: scale(0);
/*
alternatively:
transform: translate(-999px, 0);
*/
4. The clip-path property creates a clipping region that determines which parts of an element are visible. Using a value such as clip-path: circle(0); will completely hide the element.
clip-path: circle(0);
5. The visibility property can be set to visible or hidden to show and hide an element.
visibility: hidden;
6. Display is probably the most-used element-hiding method. A value of none effectively removes the element as if it never existed in the DOM.
display: none;
7. The HTML hidden attribute can be added to any element.
<p hidden>
Hidden Content
</p>
[hidden] {
display: none;
}
8. The position property allowS an element to be moved from its default static position within the page layout using top, bottom, left, and right. An absolute-positioned element can therefore be moved off-screen with left: -999px or similar.
position: absolute;
left: -999px;