Main background-position dan transtion

Main css lagi kali ini transition + background-position dengan posisi absolute kita bisa membuat beberapa efek menarik, tentunya dengan sentuhan transition juga.

LIUSTRASI

Membelah-belah elemen dan mengatur posisi background agar terlihat menyatu lalu saat di:hover elemennyapun akan terbelah dan menghilang. inilah manipulasi css yang asik sekali :). efek yang aku buat ini adalah salah satu efek dari banyaknya efek yang bisa dibuat.

Pada elemen dengan posisi absolute semua class dijadikan satu seperti ini

.satu,.dua,.tiga,.empat,.lima {
  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMcRti_fuYwwEWI6gjhiQxIBGhBaKSRamNp5lDhD3R9v2hvUUZBtyuP5FSxGu1O5dwPmN7UWEgmSh4sfJr3CQEEqzFG8PShb1JDRC2biRoMUbHnJnpBdCzq0P2qi6_E2ecHBfL1cz_dI/h0/174_7408_1024x768.jpg") no-repeat;
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100px;
  -moz-transition:all 1s linear;
  -o-transition:all 1s linear;
  -webkit-transition:all 1s linear;
  transition:all 1s linear;
}

Diberi background dan posisi yang sama, namun ada pengaturan yang beda pada class tersendirinya yang seperti ini..

.satu {
  top:0;
  background-position:0 0;
}

.dua {
  top:100px;
  background-position:0 -100px;
}

.tiga {
  top:200px;
  background-position:0 -200px;
}

.empat {
  top:300px;
  background-position:0 -300px;
}

.lima {
  top:400px;
  background-position:0 -400px;
  height:200px;
}

Jika tidak diatur seperti itu maka elemennya akan menumpuk menjadi satu, jadi kita memisahkan dengan jarak 100px dan mengatur posisi backgroundnya ( ini kita sesuaikan sendiri biar pas ) lalu pada class terakhir aku memberi height: 200px hanya untuk menyesuaikan saja biar pas dengan tingginya layar karena kalau 100px ada ruang kosong dibagian bawah class lima ( .lima ) jadi aku beri tinggi 200px jika anda masih bingung liat langsung sumber kodenya dan pelajari.