- Key Takeaways
- Animation
- Accessibility
- Event Handling
- Performance
- 1. opacity and filter: opacity()
- 2. color Alpha Transparency
- 3. transform
- 4. clip-path
- 5. visibility
- 6. display
- 7. HTML hidden attribute
- 8. Absolute position
- 9. Overlay Another Element
- 10. Reduce Dimensions
- Hidden Choices
- FAQs on How to Hide Elements in CSS
There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling.
Key Takeaways
- There are multiple ways to hide elements in CSS, each with varying effects on accessibility, layout, animation, performance, and event handling.
- The opacity and filter: opacity() properties can make an element fully transparent, but the element remains on the page and can still trigger events.
- The transform property can hide an element by moving it off-screen or scaling it down, offering excellent performance and hardware acceleration.
- The display property is a common method to hide elements, but it can’t be animated and can trigger a page layout, making it a less desirable choice in many cases.
- Other methods to hide elements include the HTML hidden attribute, absolute position, overlaying another element, and reducing dimensions, each with their own pros and cons.
Animation
Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible.
Accessibility
Each method described below will visually hide an element, but it may or may not hide the content from assistive technologies. For example, a screen reader could still announce tiny transparent text. Further CSS properties or ARIA attributes such as aria-hidden="true"
may be necessary to describe the appropriate action.
Be aware that animations can also cause disorientation, migraines, seizures, or other physical discomfort for some people. Consider using a prefers-reduced-motion media query to switch off animations when specified in user preferences.
Event Handling
Hiding will either stop events being triggered on that element or have no effect. That is, the element is not visible but can still be clicked or receive other user interactions.
Performance
After a browser loads and parses the HTML DOM and CSS object model, the page is rendered in three stages:
- Layout: generate the geometry and position of each element
- Paint: draw out the pixels for each element
- Composition: position element layers in the appropriate order
An effect which only causes composition changes is noticeably smoother than those affecting layout. In some cases, the browser can also use hardware acceleration.
1. opacity
and filter: opacity()
The opacity: N and filter: opacity(N) properties can be passed a number between 0 and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly.
See the Pen
hide with opacity: 0 by SitePoint (@SitePoint)
on CodePen.
There’s little practical difference between the two in modern browsers, although filter
should be used if multiple effects are applied at the same time (blur, contrast, grayscale, and so on).
Opacity can be animated and offers great performance, but be aware that a fully transparent element remains on the page and can trigger events.
metric | effect |
---|---|
browser support | good, but IE only supports opacity 0 to 1 |
accessibility | content not read if 0 or 0% is set |
layout affected? | no |
rendering required | composition |
performance | best, can use hardware acceleration |
animation frames possible? | yes |
events triggered when hidden? | yes |
2. color
Alpha Transparency
opacity
affects the whole element, but it’s also possible to set the color, background-color, and border-color properties separately. Applying a zero alpha channel using rgba(0,0,0,0)
or similar renders an item fully transparent.
See the Pen
hide with color alpha by SitePoint (@SitePoint)
on CodePen.
Each property can be animated separately to create interesting effects. Note that transparency can’t be applied to elements with image backgrounds unless they’re generated using linear-gradient or similar.
The alpha channel can be set with:
transparent
: fully transparent (in-between animations are not possible)rgba(r, g, b, a)
: red, green, blue, and alphahsla(h, s, l, a)
: hue, saturation, lightness, and alpha#RRGGBBAA
and#RGBA
metric | effect |
---|---|
browser support | good, but IE only supports transparent and rgba |
accessibility | content still read |
layout affected? | no |
rendering required | painting |
performance | good, but not as fast as opacity |
animation frames possible? | yes |
events triggered when hidden? | yes |
3. transform
The transform property can be used to translate (move), scale, rotate, or skew an element. A scale(0)
or translate(-999px, 0px)
off-screen will hide the element:
See the Pen
hide with transform: scale(0); by SitePoint (@SitePoint)
on CodePen.
transform
offers excellent performance and hardware acceleration because the element is effectively moved into a separate layer and can be animated in 2D or 3D. The original layout space remains as is, but no events will be triggered by a fully hidden element.
metric | effect |
---|---|
browser support | good |
accessibility | content still read |
layout affected? | no — the original dimensions remain |
rendering required | composition |
performance | best, can use hardware acceleration |
animation frames possible? | yes |
events triggered when hidden? | no |
4. clip-path
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.
See the Pen
hide with clip-path by SitePoint (@SitePoint)
on CodePen.
clip-path
offers scope for interesting animations, although it should only be relied on in modern browsers.
metric | effect |
---|---|
browser support | modern browsers only |
accessibility | content still read by some applications |
layout affected? | no — the original dimensions remain |
rendering required | paint |
performance | reasonable |
animation frames possible? | yes, in modern browsers |
events triggered when hidden? | no |
5. visibility
The visibility property can be set to visible
or hidden
to show and hide an element.
See the Pen
hide with visibility: hidden by SitePoint (@SitePoint)
on CodePen.
The space used by the element remains in place unless a collapse
value is used.
metric | effect |
---|---|
browser support | excellent |
accessibility | content not read |
layout affected? | no, unless collapse is used |
rendering required | composition, unless collapse is used |
performance | good |
animation frames possible? | no |
events triggered when hidden? | no |
6. display
The display property is probably the most-used element-hiding method. A value of none
effectively removes the element as if it never existed in the DOM.
See the Pen
hide with display: none by SitePoint (@SitePoint)
on CodePen.
However, it’s possibly the worst CSS property to use in the majority of cases. It can’t be animated and will trigger a page layout unless the element is moved out of the document flow using position: absolute
or the new contain property is adopted.
display
is also overloaded, with options such as block
, inline
, table
, flexbox
, grid
and more. Resetting back to the correct value after display: none;
can be problematic (although unset may help).
metric | effect |
---|---|
browser support | excellent |
accessibility | content not read |
layout affected? | yes |
rendering required | layout |
performance | poor |
animation frames possible? | no |
events triggered when hidden? | no |
7. HTML hidden
attribute
The HTML hidden attribute can be added to any element:
<p hidden>
Hidden content
</p>
This applies the browser’s default style:
[hidden] {
display: none;
}
This has the same benefits and flaws as display: none, although it could be useful when using a content management system that doesn’t permit style changes.
8. Absolute position
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.
See the Pen
hide with position: absolute by SitePoint (@SitePoint)
on CodePen.
metric | effect |
---|---|
browser support | excellent, unless using position: sticky |
accessibility | content still read |
layout affected? | yes, if positioning is changed |
rendering required | depends |
performance | reasonable if careful |
animation frames possible? | yes, on top , bottom , left , and right |
events triggered when hidden? | yes, but it may be impossible to interact with an off-screen element |
9. Overlay Another Element
An element can be visually hidden by positioning another over the top which has the same color as the background. In this example, an ::after
pseudo-element is overlaid, although any child element could be used.
See the Pen
hide with an overlay by SitePoint (@SitePoint)
on CodePen.
While technically possible, this option requires more code than other options.
metric | effect |
---|---|
browser support | excellent |
accessibility | content still read |
layout affected? | no, if absolutely positioned |
rendering required | paint |
performance | reasonable if careful |
animation frames possible? | yes |
events triggered when hidden? | yes, when a pseudo or child element is overlaid |
10. Reduce Dimensions
An element can be hidden by minimizing its dimensions using width, height, padding, border-width and/or font-size. It may also be necessary to apply overflow: hidden to ensure content doesn’t spill out.
See the Pen
hide with width or height by SitePoint (@SitePoint)
on CodePen.
Interesting animated effects are possible, but performance is noticeably better with transform.
metric | effect |
---|---|
browser support | excellent |
accessibility | content still read |
layout affected? | yes |
rendering required | layout |
performance | poor |
animation frames possible? | yes |
events triggered when hidden? | no |
Hidden Choices
display: none
has been the favorite solution to hide elements for many years, but it’s been superseded by more flexible, animatable options. It’s still valid, but perhaps only when you want to permanently hide content from all users. transform
or opacity
are better choices when considering performance.
For some really cool demos on how to show and hide images with CSS, check out How to Add a CSS Reveal Animation to Your Images.
FAQs on How to Hide Elements in CSS
How to Hide an Element in CSS?
There are many ways to hide elements in CSS. Which you choose depends on what you’re trying to achieve, but among other considerations are SEO and accessibility. Common methods include using the display property, visibility, opacity, height and width, positioning, and the CSS clip property. We cover each of these methods, and more, in this article, and look at how each affects accessibility and SEO.
How to Hide Element in CSS Without Display None?
Using display: none
may be the easiest way to hide an element with CSS, but it can have serious side effects for accessibility and SEO. There are at least nine other ways to hide elements with CSS that are often far superior to display: none
— including filter and opacity, color transparency, transforms, clip-path, visibility, the HTML hidden
attribute, positioning, element overlays and reduced dimensions.
What Is the Opposite of Hiding in CSS?
In CSS, we often want to hide elements, only to later show, reveal or display them. We can control both hiding and showing/revealing elements with CSS, or we can also use JavaScript along with CSS to show/hide elements.
The most common way to display an element is by using the display
property with a value of block
, inline
, inline-block
, flex
, grid
, or another appropriate value depending on the desired layout behavior. For example:/* Show an element as a block-level element */ .element { display: block; }
/* Show an element as an inline-level element */ .element { display: inline; }
/* Show an element as an inline-block element */ .element { display: inline-block; }
You can also use JavaScript to toggle the display
property of an element from none
(hidden) to its default value (usually block
or inline
) when you want to dynamically show or hide elements in response to user interactions or other events.
How to Hide an Element Based on a Value in CSS?
In CSS, you can hide an element based on its value using a combination of selectors and CSS properties. The exact approach you take will depend on the type of element and the value you want to use as the condition for hiding. Here are a few common scenarios:
1. Hiding an Element Based on Its Content (Text):
If you want to hide an element based on its textual content, you can use the :contains
selector. However, it’s important to note that :contains
is not a standard CSS selector and is not supported by all browsers. You might need to use JavaScript or another method for better compatibility./* This example uses jQuery for :contains */ .element:contains("Hide this text") { display: none; }
2. Hiding an Element Based on an Attribute Value:
If you want to hide an element based on the value of an attribute, such as data-*
attributes, you can use attribute selectors. Here’s an example:<div data-hide="true">This should be hidden</div> <div data-hide="false">This should be visible</div>
/* Hide elements with data-hide="true" */ [data-hide="true"] { display: none; }
3. Hiding an Element Based on a Class or ID:
You can also use classes or IDs to hide elements based on their value. For instance, if you have a specific class or ID assigned to elements you want to hide, you can use CSS like this:<div class="hide-me">This should be hidden</div> <div class="show-me">This should be visible</div>
/* Hide elements with the class "hide-me" */ .hide-me { display: none; }
4. Hiding an Element Based on a Specific Value with JavaScript:
If you need to hide an element based on more complex conditions or values that aren’t easily handled with CSS alone, JavaScript is a more suitable choice. You can use JavaScript to add or remove classes, change styles, or manipulate the DOM based on specific criteria.
Here’s an example using JavaScript and a hypothetical shouldHide
function:<div id="elementToHide">This should be hidden</div> <div id="elementToShow">This should be visible</div>
<script> // Replace this condition with your specific logic if (shouldHide()) { document.getElementById("elementToHide").style.display = "none"; } </script>
Remember to replace shouldHide()
with your own logic that determines whether the element should be hidden or not.
So CSS can be used to hide elements based on their content, attributes, classes, or IDs to some extent. However, for more complex conditions or dynamic values, JavaScript is often required for better control and flexibility.
How Do I Hide Content in HTML
Hiding content is most commonly done with CSS. There are many ways to do this, and which you choose depends on what you’re trying to achieve, but among other considerations are SEO and accessibility. In this article, we’ve looked at ten different ways to hide content with CSS, and how each method affects accessibility and SEO.
Does hiding elements with CSS hurt accessibility?
The simple answer is: it depends. Hiding elements with display: none
, while convenient, is certainly bad for accessibility. Thankfully, there are ways to hide and show content that can be made accessible — both to keyboard users and even screen readers. In this article, we’ve looked at ten different ways to hide content with CSS, and how each method affects accessibility and SEO.
Does hiding elements with CSS hurt SEO?
Hiding elements with CSS definitely can have implications for SEO (Search Engine Optimization), and it’s important to be cautious when using CSS to hide elements on a webpage. Whether it hurts your SEO or not depends on the context and your intent.
Here are some considerations:
Hidden Content for SEO Manipulation. If you’re hiding content solely for the purpose of manipulating search engine rankings, such as keyword stuffing or hiding links, it’s considered a black hat SEO technique and can result in penalties from search engines if detected. Search engines aim to provide relevant and useful content to users, so they don’t like to see content hidden solely for ranking purposes.
User Experience Matters. Search engines like Google prioritize user experience. If you hide content in a way that harms user experience, such as making it difficult for users to find information or navigate your site, it can indirectly impact your SEO. High bounce rates or low user engagement can signal to search engines that your site may not be providing valuable content.
Legitimate Uses of CSS Hiding. There are legitimate reasons to use CSS to hide elements, such as creating mobile-responsive designs or improving accessibility. For example, you might use CSS to hide certain elements on mobile devices to improve the layout and usability. If you’re using CSS to enhance user experience, it’s less likely to negatively impact SEO.
Google’s Guidelines. Google provides guidelines on how to handle hidden content. They generally advise against hiding content with CSS for SEO purposes, but they do recognize legitimate uses like improving mobile user experience or providing alternative text for visually impaired users. It’s crucial to follow these guidelines.
Javascript-generated Content. Content that’s generated by JavaScript and not visible in the initial HTML source can also have SEO implications. Search engines have become better at indexing JavaScript-generated content, but it’s essential to ensure that critical content is visible to both users and search engine crawlers.
So, to summarize, hiding elements with CSS can certainly hurt SEO if it’s done for manipulative purposes or if it degrades user experience. However, if done for legitimate reasons like improving mobile responsiveness or accessibility, it’s less likely to have a negative impact. Always follow search engine guidelines, create content that benefits users, and focus on providing a positive user experience to maintain good SEO practices.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.