Cara Membuat Durasi CSS Transisi pada Blog

Baca Juga

Daftar isi: [Tampil]

Cara Membuat Durasi CSS Transisi pada Blog - AldoSEO | Tutorial kali ini hanya untuk mempercantik tampilan suatu blog agar terlihat lebih dinamis dan elegant. Efek ini bisa sobat kreasikan sendiri sesuai selera masing-masing.

Hover Pertama :

box1 {
display:block;
  width:50px;
  height:120px;
  background-color:#b00;
  margin:15px auto;
}

box1:hover {
height:150px;
  background-color:#f00;
  margin:0 auto;
}

Hover Kedua :

box2 {
display:block;
  width:50px;
  height:120px;
  background-color:#b00;
  margin:15px auto;
}

box2:hover {
height:150px;
  background-color:#f00;
  margin:0 auto;
 -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out;
}

Hover Ketiga :

box3 {
display:block;
  width:50px;
  height:120px;
  background-color:#b00;
  margin:15px auto;
-webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out;
}

box3:hover {
height:150px;
  background-color:#f00;
  margin:0 auto;
 -webkit-transition:all 0s ease-out; -moz-transition:all 0s ease-out; -o-transition:all 0s ease-out; transition:all 0s ease-out;
}