Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Hide and Show HTML Elements with CSS

    Tyler ClarkTyler Clark

    CSS gives us control over the visibility of elements on a website. For example when dealing with transitions, understanding how to show and hide elements is essential. Let's work with display, visibility, and opacity to control how our elements appear and take up space.

    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Let's go ahead and give our h1 an opacity of zero. When we refresh the page, we'll see that our h1 seems to disappear from the page. When we inspect the element, we see it's still in the HTML tree, but we can't actually see it anymore.

    00:14 CSS gives us the ability to show and hide elements on a page. In this case, we're using opacity to hide the element. Opacity specifies the level of transparency of an element. In other words, the degree to which the content behind the element is visible.

    00:29 Since our opacity is set to zero, our element is hidden, but it's still taking up space on the page. Knowing how to hide and show elements on a website is helpful when adding transitions and animations.

    00:41 Let's give our h1 a class of transition, with a transition of one second, and opacity of one. You see that when we toggle our opacity enough, our h1 is appearing and disappearing within a one-second time frame.

    00:54 Again, this is nice when adding transitions to appearing and disappearing elements. Let's go ahead and refresh this page. We'll change our opacity of zero to visibility hidden. We'll see, just like opacity, visibility hidden is going to hide the element, while it's still taking up space on the page.

    01:13 However, unlike opacity, there is only a hidden and visible option. There's no in-between option. A transition value would not work with visibility. Finally, let's remove this, and add display none. When we refresh the page, we'll see that not only is our h1 gone, but it's actually be removed from the layout of the page.

    01:32 When we hover over our h1, we're not going to see it highlight anything on the page. Like visibility, there's no in-between option. Transitions will also not work. Display none is a great option when hiding HTML from a page, and you don't want it to take up any space.

    Discuss

    Discuss