Pengenalan Property Visibility Pada CSS

Haiii masih bersama saya , kali ini saya akan membahas tentang property visibility pada css, nah penggunaan visibiliti ini biasanya untuk memunculkan atau menyembunyikan suatu elemen tanpa menghilangkan element tersebut di halaman html kita,

jadi singkatnya walapun kita hilangkan tetapi elemen tersebut sebenarnya masih ada di halaman html kita tetapi cuma tidak di perlihatkan. Sampai di sini paham ? hehhe kalau masih bingung langsung aja liat demonya ya :

value property visibility ada beberapa yaitu :

Visibility :visible

Visibility :hidden

Nah pada code di atas akan di contohkan secara langsung dari masing-masing value visibilitynya.

//HTML

<div class="container">
  <div class="note">
    The following demo shows an inline image in a paragraph of text. If you hover over the image, it will be hidden using the <code>visibility</code> property. Its position in the flow is preserved.
  </div>
  <p>Lorem ipsum dolor sit amet, <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/display/smiley.jpg" alt="Smiley Image"> consectetur adipisicing elit. Delectus, ducimus, quis, ea, earum vitae cum voluptatum facilis laborum id necessitatibus autem quasi iste quia veniam dolore. Iusto, vel consectetur quidem.</p>

  <hr>

  <div class="note">
    This example shows a hidden element and its descendants. Setting <code>visibility: visible;</code> on the children will make them visible, even if their parent is invisible. The hover event of the hidden element is fired when u hover over its visible child.
  </div>
  <div class="element">
    I am hidden. I become visible when hovered. The hidden parts of me won't fire the hover event, but hovering over my child here will do it (because my child is a part of me).
    <div class="child">
      I am a descendant of a hidden element. You can make me visible by setting <code>visibility: visible</code> on me.
      <p>
        If you hover over me, the hover event of my parent will be fired and you will be able to see it.
      </p>
    </div>
  </div>
</div>

/CSS

body {
  color: #222;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.note {
  color: #888;
  font-style: italic;
}

hr {
  margin: 50px 0;
}

.element {
  padding: 20px;
  background-color: #0099cc;
  color: white;
  margin: 30px 0;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  visibility: hidden;
}

.element:hover {
  visibility: visible;
}

.child {
  background-color: skyblue;
  color: #222;
  padding: 15px;
  margin: 20px;
  visibility: visible;
}

p img {
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

p img:hover {
  visibility: hidden;
}

Setelah kalian salin code di atas lalu kalian jalankan pada browser masing-masing dan lihat seperti apa hasilnya. Oke itu saja untuk kali ini, sampai bertemu pada artikel selanjutnya.

Terimakasih

Pengenalan Property Visibility Pada CSS

Kategori