Pengenalan Property Visibility Pada CSS

Haiii masih bersama saya , kali ini saya akan membahas mengenai property visibility di css, nah pemakaian visibiliti ini biasanya bagi memunculkan atau menyembunyikan suatu unsur tanpa menghilangkan element tersebut di halaman html kita,

jadi singkatnya walapun kita hilangkan tetapi unsur tersebut hakekatnya masih ada di halaman html kita tetapi cuma tak di perlihatkan.  Hingga di sini paham ? hehhe kalau masih bingung seketika aja liat demonya ya :

 

value property visibility ada beberapa yaitu :

Visibility :visible

Visibility :hidden

Nah di code di atas akan di contohkan secara seketika 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= kali ini saya akan membahas mengenai property visibility di css Pengenalan Property Visibility Di CSS> 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. Pengaturan <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 pengaturan <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 di browser masing-masing dan lihat seperti apa hasilnya. Oke itu saja bagi kali ini, hingga bertemu di artikel berikutnya.

Terimakasih

Sumber https://kursuswebsite.org