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

  • Rizky Sopiyandi

    cara pasangnya gmn nih?

  • 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 Taruhnya di mana mas ??? Diatas ]]></b:skin ya mas ??? Hehehe :D

  • 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 :)

  • Taufik Nurrohman

    @Brian Kamikaze Coba pakai cara yang pertama di sebelah atas, yang memakai kelas manual ^:D

  • 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.