10 ways to “hide” elements with CSS

Tram Ho

Hi guys Continue the series of articles about Front-End, in this article I would like to introduce you to a number of ways to “hide” an element with CSS.

Why are you hidden words in quotation marks? ? . Hiding here may be “hidden” (cannot attach events to element) or hidden here also means “not completely hidden – invisible” (still able to attach events to elements). Details like let’s find out

1.opacity and filter: opacity ()

opacity is too familiar with dev already, filter: opacity(N); less often used. And just set the value to 0 you can hide the element, this way we can still attach events to the element (it is not completely hidden but merely invisible)

2. color Alpha Transparency

You probably already worked with rgba () or hsla () color code, then just set the Alpha value (the fourth value) to 0, then you can hide the element.

3. transform

transform in CSS3 are too dangerous, you can use the scale () function or translate to transform the element. Specifically we can use 3 ways

4. clip-path

clip-path is also a strong candidate for this topic, to hide the elements we do as follows

5. visibility

The name says it all, to hide the element with visibility


This is the most dangerous, when the display receives none , it will hide the element completely and you cannot attach the event to that element.

This is usually the # 1 choice for developers, but in some cases it’s not the perfect choice (for example, combining display with transition ).

7. hidden

hidden is an attribute in HTML where it has defaulted to css display: none . We use the following

8. Absolute

Using absolute is quite similar to transform , ie you can specify 4 top / bottom / left / right values ​​into negative values ​​to move element out of view.

9. Overlay

Using pseudo-element can also help us to hide element (however note that this is only hidden “by setting background according to parent element”)

10. Minimize size

The last way I want to introduce here is a combination of 3 attributes height , padding , overflow


Above I have introduced you some ways to hide elements with CSS, hoping to help you while working.

If you find a good article, give me +1 upvote. If you like me, click the follow button for more cool stuff. Good luck !

Share the news now

Source : Viblo