Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Visibility

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Visibility

      CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.
      The visibility property can be used to create a variety of effects, such as hiding elements that are not yet ready to be displayed, or hiding elements that are only relevant to certain users.

      Possible Values

      • visible − The element is visible.
      • hidden − The element is hidden, but it still takes up space on the page.
      • collapse − Remove table rows, columns, column groups, and row groups from a table. collapse has the same meaning as hidden if it is used on nontable elements.
      • initial − Sets the visibility of an element to its default value.
      • inherit − Inherits the visibility property from its parent element.

      Applies to

      All the HTML elements.

      DOM Syntax

      visibility: visible | hidden | collapse | initial | inherit;

      CSS visibility - visible Value

      CSS visibility: visible property makes an element visible. This is the default value for the visibility property.
      <html>
      <head>
      <style>
         h2 {
            visibility: visible;
         }
      </style>
      </head>
      <body>
         <h2>Tutorialspoint CSS visibility</h2>
      </body>
      </html>

      CSS visibility - hidden Value

      The visibility: hidden property hides an element from the user's view, but it does not remove it from the document layout.
      The element will still be accessible to screen readers and will affect the layout of the page, even though it is not visible.
      <html>
      <head>
      <style>
         h2 {
            visibility: hidden;
         }
      </style>
      </head>
      <body>
         <h2>Tutorialspoint CSS visibility hidden</h2>
         <p>The hidden heading is still visible to screen readers and takes up space in the page.</p>
      </body>
      </html>

      CSS visibility - collapse Value

      To remove a table row or column without affecting the layout of the table, you can set the visibility property of the row or column to collapse. This value is only valid for table elements.
      <html>
      <head>
      <style>
         .collapse {
            visibility: collapse;
         }
         table {
            border-collapse: collapse;
            color: #ffffff;
            width: 100%;
            background-color: #35DC5A;
            border: 2px solid black;
         }
         th,
         td {
            border: 2px solid black;
            padding: 8px;
            text-align: left;
            font-size: 20px;
         }
      </style>
      </head>
      <body>
         <table>
            <tr>
               <td>visible</td>
               <td>hidden</td>
               <td class="collapse">collapse</td>
            </tr>
            <tr>
               <td>initial</td>
               <td>inherit</td>
               <td>revert</td>
            </tr>
         </table>
      </body>
      </html>

      CSS visibility - Collapse On Nontable Elements

      Following example demonstrates when visibility:collapse is set on nontable elements, here we see the property acts same as visibility:hidden:
      <html>
      <head>
      <style>
         .collapse {
            visibility: collapse;
         }
      
      </style>
      </head>
      <body>
        <h2>Collapse on nontable elements</h2>
        <p class="collapse">you cant see me</p>
        <p>the above sentence is hidden</p>
      </body>
      </html>

      CSS visibility - Transition Effects

      Following example demonstrates how the element is hidden on hovering over an image:
      <html>
      <head>
      <style>
         .collapse {
            visibility: collapse;
         }
         img:hover + .hidable {
          visibility: hidden;
        }
      </style>
      </head>
      <body>
        <img src="images/tutimg.png" style="cursor:pointer;" />
        <h2 class="hidable">Hovering over the above image hides me!</h2>
      </body>
      </html>
      Pri
      
      
      
      
      Pag