cssには要素を隠す方法として「opacity:0」や「display:none」、「visibility:hidden」の３つがあります。
それぞれに違いがありましたのでまとめてみました。

opacity［透明度を変えて隠す］

See the Pen
hidden-block by kahsin0033 (@kashin0033)
on CodePen.

「opacity」は透明度のことを指します。opacityが０に近づくことで要素の透明度を上げていきます。
しかし、要素を透明にしただけで実際に要素は存在しています。上記の「opacity:0」の文字の下にはテキストリンクが入っており、マウスのカーソルを重ねると文字の色が変わる場所がありますが見えません。
このように要素を見えなくすることは出来ますが中のリンクなどはクリックすることができてしまいます。

display［表示形式を変えて隠す］

See the Pen
display:none by kahsin0033 (@kashin0033)
on CodePen.

「display」は要素の表示形式を指定するcssです。
「display:none」は要素自体をなくすcssです。
上記ではJavaScriptを使い「ボタン」をクリックすることで表示の際には「display:block」、非表示の際には「display:none」のcssを切り替えてテキストリンクの表示・非表示を行なっております。
「display:none」は要素の幅や高さなども全て表示しませんのでJavaScriptと組み合わせて要素の表示・非表示を切り替える方法などに使われるcssです。

visibility［表示・非表示を指定して隠す］

See the Pen
visibility:hidden by kahsin0033 (@kashin0033)
on CodePen.

「visibility」は要素の表示・非表示を指定するcssです。
「visibility:hidden」は要素を非表示にするcssです。テキストリンクが入っていたとしてもクリックできないようになっております。
しかし、「display:none」と違い要素の幅や高さはそのまま残されます。

まとめ

以上が要素を隠すcssの種類と違いでした。
主に使われるのは「display:none」でjsとの組み合わせで使われています。
「visibility:hidden」もほとんどのブラウザで対応しているので要素を隠す1つの方法として覚えておこうと思います。