10 CSS Techniques for Hiding Elements

In web development, there are numerous scenarios where you might want to manipulate the visibility of certain elements on your website. This article will delve into ten different methods for hiding content using CSS, considering various use cases.

The specific behavior of hiding an element can vary depending on your needs. You may want to look at methods that reserve space for hidden objects or those that completely remove them from the layout. Furthermore, the term ‘hide’ can refer to a variety of actions, such as making an element invisible, removing it from the layout, or reducing its opacity. It’s hard to believe there are so many possibilities, but the ten sections below will show you different ways to hide elements in CSS; let’s proceed!

1. Display

The display property in CSS is used to specify the type of rendering box used for an element. Setting the display property to none will hide the element completely. Syntax:

.hidden {
 display: none;
}

Below is a code pen example of how to hide an element using the display method:

It’s a useful tool, but it can complicate CSS code, as it needs more fine control in some circumstances and can cause unintended layout disruptions if not utilized wisely.

2. Visibility

The visibility property allows you to show or hide an element while keeping its position in the layout intact, which means that when an element is hidden using visibility, it still takes up space in the document. Syntax:

.hidden {
 visibility: hidden;
}

Below is an example of hiding elements using the hidden attribute’s visibility method.

The div element is made visually hidden in the provided code while staying in the card’s structure, and this operation does not affect the card layout.

3. Opacity

The opacity property in CSS sets the opacity level for an element. It allows you to adjust the transparency level of an element to make it visible or invisible. This feature affects an element’s visual look without removing it from the layout. An opacity level of 0 makes the element completely transparent, effectively hiding it. Syntax:

.hidden {
 opacity: 0;
}

Below is an example of how to hide an element using the opacity method:

Changing opacity to 0 makes an element transparent but still occupies space in the layout.

4. Transform

In CSS, the transform property changes the appearance and layout of HTML elements and lets you apply transformations such as scaling, rotating, and translating items. This property is commonly used for creating animations and effects. You can hide an element by setting the transform property to scale(0). Syntax:

.hidden {
 transform: scale(0);
}

Below is an example of how to use this CSS trick to hide an element:

When elements are hidden using the transform property, screen readers can still read their content.

5. Clip-path

The clip-path CSS property defines a clipping region to hide a piece of the content of an element. It’s a good way to hide or show parts of an element by drawing various shapes like circles or polygons. Clip-path can create visually appealing effects, such as circular pictures or custom-shaped objects. Syntax:

.hidden {
 clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

Below is an example of how to use clip-path to hide element:

In the above code, the clip-path property is set to a polygon with four points, all at the origin (0, 0), effectively hiding the element. Using clip-path to hide elements is relatively efficient, as it clips the visible area without affecting the layout or rendering performance significantly.

6. Position

The position method removes an element from the usual page flow by utilizing CSS’s position property, notably position: absolute or fixed. Using top, bottom, left, and right values, you can shift an element’s default position in a webpage layout. Syntax:

.hidden {
 position: absolute;
 left: -9999px;
}

Below is an example of how to hide an element using the position method:

In the above example, the div element is moved off the screen by specifying a value such as left: -9999px. This method positions an element outside the viewport, effectively hiding it. It’s generally efficient, but you should be cautious about elements shifting the layout.

7. Color Property

The color property in CSS is another method for hiding elements in CSS. It works by individually adjusting the color, background color, and border color parameters. A zero alpha channel, such as rgba(0,0,0,0), or something similar, can make it transparent.

.hidden {
 color: rgba(0,0,0,0);
 background-color:rgba(0,0,0,0);
}

Below is an example of how to use the color property to hide text:

The color property is an efficient way to hide text. It doesn’t significantly impact performance. It’s also important to note that while this method hides the text from the visual display, users can still highlight the hidden text using the mouse cursor. The element itself retains its interactive properties. Therefore, the color method hides the text content, making it invisible but accessible for selection and interaction.

8. Measurement

The measurement method is a CSS technique for hiding items by adjusting their size or dimensions. It works by reducing the dimensions of the height, width, and overflow properties. By setting these properties to 0, you can effectively hide the element.

.hidden {
 height: 0;
 width: 0;
 overflow:hidden
}

Below is an example of how to hide elements using measurement:

Setting width and height to 0 effectively hides an element while still occupying layout space.

9. Filter

The filter method is a CSS technique that involves hiding or manipulating components visually by utilizing the “filter” property. The “opacity” filter is primarily used in this method to adjust the transparency of items, making them totally or partially translucent. Syntax:

.hidden {
filter: opacity(0); 
}

Below is an example of using the filter method to hide elements:

Using a filter to blur an element can hide it visually. The performance depends on the complexity of the filter, with simple filters being more efficient.

10.Overlay Using ::after Pseudo-Element

Overlaying an element is a method that involves placing one element on top of another to hide the content underneath. Using the ::after pseudo-element is a common approach for creating overlays. Syntax:

.hidden::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #fff;
 z-index: 1;
}

Below is an example of how to hide an element using the ::after pseudo-element:

This pseudo-element is absolutely positioned to cover the entire card. The overlay will appear only when the card2 element button is clicked. Overlaying elements with ::after pseudo-elements can be efficient. It’s visually effective, And that’s a wrap, guys!

Conclusion

Hiding elements in CSS is a common and essential part of web development. The method you choose depends on the specific use case, including whether you want to completely remove an element from the document flow or hide it while preserving its layout space. Understanding these ten methods for hiding elements using CSS can improve the user experience and create more dynamic and interactive web pages. Experiment with these techniques to determine which suits your project’s requirements best.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.