Mecha versi 2.6.4 sudah dirilis!

Berbagai Efek Transisi pada Gambar

Tabel Konten
  1. Efek Bumping 
  2. Efek Fade Out 
  3. Efek Fade In 
  4. Efek Rotasi 
  5. Efek Membesar 
  6. Efek Skew 

Efek Bumping 

Taufik Nurrohman
.demo-1 {
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.demo-1:hover {
  -webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}

Efek Fade Out 

Taufik Nurrohman
.demo-2 {
  -webkit-transition:opacity .5s ease-out;
  -moz-transition:opacity .5s ease-out;
  -ms-transition:opacity .5s ease-out;
  -o-transition:opacity .5s ease-out;
  transition:opacity .5s ease-out;
}

.demo-2:hover {
  opacity:0.2;
}

Efek Fade In 

Taufik Nurrohman
.demo-3 {
  -webkit-transition:opacity .5s ease-out;
  -moz-transition:opacity .5s ease-out;
  -ms-transition:opacity .5s ease-out;
  -o-transition:opacity .5s ease-out;
  transition:opacity .5s ease-out;
  opacity:0.2;
}

.demo-3:hover {
  opacity:1;
}

Efek Rotasi 

Taufik Nurrohman
.demo-4 {
  -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;
}

.demo-4:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
}

Efek Membesar 

Taufik Nurrohman
.demo-5 {
  -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;
}

.demo-5:hover {
  -webkit-transform:scale(2,2);
  -moz-transform:scale(2,2);
  -ms-transform:scale(2,2);
  -o-transform:scale(2,2);
  transform:scale(2,2);
}

Efek Skew 

Taufik Nurrohman
.demo-6 {
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.demo-6:hover {
  -webkit-transform:skew(30deg,20deg);
  -moz-transform:skew(30deg,20deg);
  -ms-transform:skew(30deg,20deg);
  -o-transform:skew(30deg,20deg);
  transform:skew(30deg,20deg);
}

16 Komentar

Taufik Nurrohman

@Rizqisme_89Tinggal menyesuaikan classnya saja. Misal mau buat efek fadeIn, salin kode yang ini:

.demo3 {
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-ms-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
opacity:0.2;
}
.demo3:hover {
opacity:1;
}

Lalu taruh di atas ]]></b:skin> atau </style>

Untuk memanggil efeknya jangan lupa tambahkan class="demo3" pada gambar yang ingin diberi efek:

<img src="ganteng.jpg" class="demo3" alt="" />

Unknown

masih ada efek yang lainya ga mas,,, ???
ditunggu ya

Unknown

mas, misalnya aku mau kasih gambar di dalam postingan efek fade in semuanya gimana mas ???
kalo pake kode pemanggil kan cape mas,, misalnya gambarnya ada 100...
berarti harus 100 kali masukin kode pemanggilnya
hadu :(

mohon pencerahannya

Taufik Nurrohman

@trii waluyo Pindah selektornya menggunakan selektor elemen induk. Misalnya, ganti selektor .demo3 menjadi .post img, dengan begitu maka CSS akan mentransisikan semua gambar yang ada di dalam posting:

.post img {
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-ms-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
opacity:0.2;
}
.post img:hover {
opacity:1;
}

Unknown

@Taufik Nurrohman Oh ya mas,, dah jadi...
Terima kasih... :Q
Mas,,, kalo warna huruf di dalam postingan di ganti bisa ga ??? Q kepengin di hitamin lagi,, suaya hitamnya tebal gitu mas :D

Taufik Nurrohman

@trii waluyo Setahu Saya sih sudah ada di dalam variabel. Tinggal masuk ke halaman Template Designer lalu edit warnanya sesuka hati.

Unknown

saya kok g jadi mas? Gambarnya tetap diam aj :)

Unknown

ini yang sudah lama ane cari..
makasih ya sobat... :)

Unknown

oiyaa..
biar gambar ga terkesan ditarik gmna ya caranya....??? :(

Allyn

Terima kasih informasinya.. ijin copas ya... :)

Cuman Android

Mas untuk menambah kecepatan dalam hover, tinggal di ubah aja ya time nya ? misalnya

.demo4 {
-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;
}

menjadi seperti

.demo4 {
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}

Salam Blogger :-bd

Ervan

keren nih
Ane pasang buat gambar header ya mas :D

Komentar telah ditutup.