10 CSS Techniques For Hiding Elements
Published: 2023-12-12 18:05:39

by [Temitope Oyedele](https://blog.openreplay.com/authors/temitope-oyedele) 

<blockquote><em>
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.
</em></blockquote>

<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>

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:
```css
.hidden {
 display: none;
}
```
Below is a code pen example of how to hide an element using the display method:
<iframe height="300" style="width: 100%;" scrolling="no" title="display:none element" src="https://codepen.io/oyedeletemitope/embed/yLZyEdO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/yLZyEdO">
 display:none element</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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:
```css
.hidden {
 visibility: hidden;
}
```
Below is an example of hiding elements using the hidden attribute's visibility method.
<iframe height="300" style="width: 100%;" scrolling="no" title="visibility:none" src="https://codepen.io/oyedeletemitope/embed/xxMbapv?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/xxMbapv">
 visibility:none</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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:
```css
.hidden {
 opacity: 0;
}
```
Below is an example of how to hide an element using the opacity method:
<iframe height="300" style="width: 100%;" scrolling="no" title="opacity" src="https://codepen.io/oyedeletemitope/embed/jOdEeEX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/jOdEeEX">
 opacity</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
 
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:
```css
.hidden {
 transform: scale(0);
}
```
Below is an example of how to use this CSS trick to hide an element:
<iframe height="300" style="width: 100%;" scrolling="no" title="transfrom" src="https://codepen.io/oyedeletemitope/embed/OJdPBva?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/OJdPBva">
 transfrom</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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:
```css
.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:
<iframe height="300" style="width: 100%;" scrolling="no" title="clip-path" src="https://codepen.io/oyedeletemitope/embed/BaMyGjX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/BaMyGjX">
 clip-path</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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.

<CTA_Middle_Basics />
 
## 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:
```css
.hidden {
 position: absolute;
 left: -9999px;
}
```
Below is an example of how to hide an element using the position method:
<iframe height="300" style="width: 100%;" scrolling="no" title="position" src="https://codepen.io/oyedeletemitope/embed/NWoPeKp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/NWoPeKp">
 position</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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.
```css
.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:
<iframe height="300" style="width: 100%;" scrolling="no" title="color" src="https://codepen.io/oyedeletemitope/embed/LYqEMMG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/LYqEMMG">
 color</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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.
```css
.hidden {
 height: 0;
 width: 0;
 overflow:hidden
}
```
Below is an example of how to hide elements using measurement:
<iframe height="300" style="width: 100%;" scrolling="no" title="measurement" src="https://codepen.io/oyedeletemitope/embed/wvNBNEO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/wvNBNEO">
 measurement</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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:
```css
.hidden {
filter: opacity(0); 
}
```
Below is an example of using the filter method to hide elements:
<iframe height="300" style="width: 100%;" scrolling="no" title="filter" src="https://codepen.io/oyedeletemitope/embed/zYexbdp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/zYexbdp">
 filter</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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:
```css
.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:

<iframe height="300" style="width: 100%;" scrolling="no" title="::after" src="https://codepen.io/oyedeletemitope/embed/YzBXPVX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/oyedeletemitope/pen/YzBXPVX">
 ::after</a> by oyedeletemitope (<a href="https://codepen.io/oyedeletemitope">@oyedeletemitope</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>
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.