Visibility in CSS Language

CSS (Cascading Style Sheets) is a fundamental technology in web development that empowers developers to control the presentation and la

yout of web content. One essential aspect of CSS is visibility, which plays a crucial role in determining whether an element is visible or hidden on a web page. In this guide, we will explore the various ways to manipulate visibility in CSS, using examples to illustrate each concept.

1. The ‘visibility’ Property:

The primary CSS property for controlling visibility is aptly named ‘visibility.’ It can take two values: ‘visible’ and ‘hidden.’

• ‘visible’: This is the default value, which makes an element visible.

Example:

.visible-element {
  visibility: visible;
}

• ‘hidden’: This value hides the element but still occupies space on the page.

Example:

.hidden-element {
  visibility: hidden;
}

2. The ‘display’ Property:

Another way to control the visibility of elements is by using the ‘display’ property. While ‘visibility’ hides an element but preserves its space, ‘display’ can completely remove the element from the layout.

• ‘block’: Displays the element as a block-level element.

Example:

.block-element {
  display: block;
}

• ‘none’: Completely removes the element from the layout.

Example:

.none-element {
  display: none;
}

3. Combining ‘visibility’ and ‘display’:

In some cases, you might want to combine both ‘visibility’ and ‘display’ to achieve specific effects. For instance, you can use ‘visibility’ to hide an element and ‘display’ to remove it from the layout.

Example:

.hidden-and-removed-element {
  visibility: hidden;
  display: none;
}

4. Hover Effects and Transitions:

You can also use visibility to create hover effects and transitions. When combined with the ‘:hover’ pseudo-class, you can make elements appear or disappear smoothly.

Example:

.hover-effect-element {
  visibility: hidden;
  transition: visibility 0.3s ease-in-out;
}

.hover-effect-element:hover {
  visibility: visible;
}