Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Difference between Visibility, Opacity and Display

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.63k
    Comment on it

    Here are some CSS properties, which looks similar. It's hard to find the difference between them.

    Like:- Visibility:hidden;

             Opacity:0;

             Display:none;

    1. Visibility:hidden;

    Visibility:hidden property hides the element in which this property is used but still occupies the space in the file.

    It is only hidden from the user but exist in the DOM. User can not access the child element.

    2. Opacity:0;

    By using Opacity:0 property, the element looks like hidden but user can access the child element.

    It also occupies the space in the DOM(Document Object Model).

    If there is anchor tag which is given with the property Opacity:0, will be clickable but will not be visible to the user.

    3. Display:none;

    If an element is having the property display:none then it will not be displayed to the user as well as will not occupy space in the DOM.

    Display:none means the particular element is finished from the entire page untill we will not manipulate it from javascript or by another method.

     

    Below is the example which will more clear with the differences between them-

    HTML-

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
      <meta name="description" content="CSS Visibility/Display/Opacity" />
      <meta charset="utf-8">
      <title>Difference</title>
    </head>
    <body>
      Visibility
      <div class="main">
        <div class="visibility">
          <a href="http://google.com">Visibility</a>
        </div>
      </div>
        Opacity
      <div class="main">
        <div class="opacity">
          <a href="http://google.com">Opacity</a>
        </div>
      </div>
      Display
      <div class="main">
        
        <div class="display">
          <a href="http://google.com">Display</a>
        </div>
      </div>
    </body>
    </html>

     

    CSS-

    div.main{
      border: 1px solid #000;
      margin: 8px;
      width:60px
    }
    
    .visibility{
      visibility: hidden;
    }
    
    .display{
      display: none;
    }
    
    .opacity{
      opacity: 0
    }

     

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: