Membuat Effect Sliding Door With CSS

Dalam tutorial ini kita akan mencoba Membuat Effect Sliding Door With CSS, atau juga di sebut membuat efek membelah gambar. Apa Effect Sliding Door With CSS? Ini simillar untuk efek pintu geser di mana pintu slide ke sisi kiri atau kanan dan memperlihatkan teks/code/gambar di baliknya, tapi satu hal yang membuat ini berbeda adalah bahwa efek terlihat seperti gambar splitted menjadi setengah dan satu pergi meninggalkan dan yang lainnya berjalan benar. Satu hal yang sangat penting adalah bahwa jika Anda memasang gambar maka Anda tidak akan menampilkan dua gambar, melainkan hanya akan ada satu. Gambar ini bekerja hanya menggunakan CSS dan HTML jadi sama sekali tidak akan berpengaruh pada kecepatan loading blog/situs Anda, dan untuk cara membuatnya pun sangatlah mudah. Berikut ini akan saya berika kode yang telah saya buat untuk Membuat Effect Sliding Door With CSS.

Membuat Effect Sliding Door With CSS

CSS

    .OWcoveraka {
    position: relative;
    width: 200px; /* lebar */
    height: 200px; /* tinggi */
    margin: 20px auto;
    background-color: #eee;/* warna background dalam */
    z-index: 1;
    
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    -mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    .OWcoveraka p {color:black;
    text-align:center;
    margin: 0;
    }
    .left_gate {
    position: absolute;
    background: #3e81c4;/* warna pintu B */
    bottom: 0; right: 50%; left: 0; top: 0;
    
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    transition: all 0.5s ease-out;
    }
    .OWcoveraka:hover .left_gate {
    right: 100%; left: -50%;
    }
    .right_gate {
    position:absolute;
    background:#222;/* warna pintu A */
    bottom: 0;
    left: 50%;
    right:0;top:0;
    
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    }
    .OWcoveraka:hover .right_gate {
    left: 100%; right: -50%;
    }
    .slide_in {
    overflow:hidden;
    }
    .slide_in .left_gate {
    background: #fff;/* warna pintu A */
    }
    .slide_in .right_gate {
    background: #3e81c4;/* warna pintu B */
    }

HTML

    <div class="OWcoveraka">
      <div class="left_gate"></div>
      <div class="right_gate"></div>

      <p>Isi Content ato Teks Anda Disini</p>

    </div>

    <div class="OWcoveraka slide_in">
      <div class="left_gate"></div>
      <div class="right_gate"></div>

      <p>Isi Content ato Teks Anda Disini</p>

    </div>

Lalu Hasilnya akan seperti ini

Effect Sliding Doors With CSS!
http://otowebsite.blogspot.com

Sekian, dan semoga bermanfaat!