How to Hide Elements with CSS on Your Website

How to Hide Elements with CSS on Your Website

Whether you build up your site from scratch or use a theme, it can help know little tricks and ways to fix up some design changes quickly. Hiding an element on your website is not a very difficult task at all. And is often the most common website update you will be making as your […]

Whether you build up your site from scratch or use a theme, it can help know little tricks and ways to fix up some design changes quickly. Hiding an element on your website is not a very difficult task at all. And is often the most common website update you will be making as your site evolves to keep up with the latest trends and tech. 

Hiding an element can be done for a variety of reasons. Maybe you want to tweak the look of your site a little bit. Maybe you want to avoid an event-based feature and want to hide that particular element from view. Maybe you are testing out a new custom page for your site. Or maybe you want an element to appear only on certain occasions. Whatever be the reason, if the task is just to hide an element, this guide is all you need. 

Using CSS To Hide Element

When you simply have to hide an element in front of the website’s display without removing it, the best thing to do is use CSS hide element properties. Cascading style sheets are scripts used to apply styling and formatting to your website elements and make them look the way you want to. Many CSS properties can be used to change the appearance, color, transparency, and similar properties of any element on a web page. 

The two major CSS properties that you can use to show or hide an element are:

  • Display 
  • Visibility 

While both these properties can be used to modify your element’s visibility on the page, the way they behave can be a little different. 

Using The Display Property 

Setting the display property to ‘none’ will completely hide the element from view and will change the layout of your webpage. 

By default, this CSS display property usually has a value of block or inline. When the element is hidden, it disappears from the webpage, and the space used by the element will be used up by other elements on the page. 

Here is the syntax to using the CSS display none property:

.classname 

{

display: none;

}

You can use either the class name, element id, or the element tag to apply the hide CSS properties accordingly. 

Using display: none hides HTML code. Any event like onclick, on hover, and such will not work on the element once you apply this style rule. 

Using The Visibility Property 

By default, this property has the value ‘visible’ and shows the element on the webpage. TO make an element invisible, all you have to do is set the value to ‘hidden.’

Unlike the display property, hiding the element using the visibility property does not change the layout of the page. The space occupied by the element will remain as it is, and only the element will be hidden. 

Here is the syntax:

.classname 

{

visibility: hidden;

}

Using Opacity Property 

Another less popular way to completely hide an element is to use the opacity property. This property is actually used to specify varying levels of transparency for the element. Therefore, by setting the value to be completely transparent, you can achieve the same result as visibility: hidden. 

Here is how you can use this property:

.classname

{

opacity:0

}

Another similar property is the filter:opacity which can be used as 

.classname

{

filter: opacity(0);

}

 The actual effects of these HTML hide element properties may vary depending on the browser. So for completely hiding an element, it is recommended that you use either the display or the visibility property. 

Using The Color Property 

If you go by the transparency route to hide your element, there is one other CSS property that can be used. 

The color property has an alpha channel value that can be set to 0 to render the element to be fully transparent. 

Here is the syntax: 

.classname

{

color:rgba(0,0,0,0);

}

Some more style rules that can set the alpha channel value are:

  • transparent
  • hsla(hue,saturation,lightness, alpha)
  • #RRGGBBAA and 
  • #RGBA

More Ways To Hide An Element  Using CSS

Here are some less popular display CSS options to hide an element. 

You can move the element from visible using properties like transform and absolute position. 

Eg. 

.classname

{

transform: scale(0);

}

Transform can also be set to translate(-999px, 0px) to move the element to an offscreen position. 

Using clip-path property, you can create a clipping region that hides the element. 

clip-path: circle(0); rule will completely hide the element:

.classname

{

clip-path: circle(0); 

}

Use the absolute position property to move the element offscreen. 

Eg. 

.classname

{

Position: absolute;

left: -999px;

}

How To Find The Element And Apply The Styles

Unless you are the developer who initially developed the webpage and has razor-sharp memory, chances are you may not be able to recollect the exact identifier for an element you wish to hide. 

The solution is simple. According to Creative Communication Logistics, instead of poring over the lengthy HTML and js code, just use the inspector tool to find the element’s name, class name, identifier, and current CSS properties. 

To access the inspect tool, right-click on the webpage, and select Inspect. Doing so will open the DevTools pane in the browser from where you can get all the identification details about the element.

Once you have chosen the element you want to hide, make the relevant changes to the main style css file to hide it. 

You can also apply the rule to multiple elements and class identifiers at the same time. 

 Eg. 

.home-page-icon .post-content

{

Display:none;

}

To apply the CSS changes to a  specific page in your WordPress site, you can use the page id of the site and specify it as the class identifier. Page Id can be found from the page URL. 

Eg,.

.page-id-0011100 .header-div

{

display:none;

}

Conclusion

As you can see, you can improve your website’s UX noticeably by simply hiding a few elements on your page using CSS. Have you ever tried using this? How was your experience? Let us know in the comments below.

Be the first to know

Subscribe to our Newsletter

If you want to receive monthly updates from us just pop your email in the box. We think that spam is for jerks. And jerks we are not.