Gambar Otomatis Berubah Saat Tersentuh Mouse
Seperti judul Artikel berikut Gambar Otomatis Berubah Saat Tersentuh Mouse, maka saat gambar pada postingan anda yang dilewati atau tersentuh mouse, secara otomatis gambar default pada postingan anda akan berubah tampilan dengan gambar lain. Seperti Membuat Tampilan Gambar Berputar Di Blog maka gambar tersebut akan berputar saat tersentuh mouse, tidak jauh berbeda dengan cara Membuat Gambar Otomatis Berubah Saat Tersentuh Mouse kali ini, hanya sedikit modifikasi dengan menggunakan CSS3 Keyframe Animasi, sehingga menghasilkan 2 gambar berbeda, yang mana gambar 1 tampil sebagai dafault dan gambar 2 akan tersembunyi, Gambar 2 akan tampil untuk menggantikan gambar 1 saat mouse menyentuh gambar 1.

Jika anda tertarik ingin mencoba dan menerapkannya pada postingan blog anda, jangan pindah channel blog anda. Ambil cemilan kebelakang sebentar, kembali lagi disini, duduk manis dan berikut kode Membuat Gambar Otomatis Berubah Saat Tersentuh Mouse. ( Hehehehe.......!!! )

Kode I - CSS3 Keyframe Animasi

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute;
  left: 0;
}

.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}

.pulloutimage img.original{
  z-index: 1;
}


@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;

  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;

  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;

  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;

  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{
  opacity:0.5;
}

Kode II - Pulloutimage{...}

<div class="pulloutimage" style="height:250px">
<a href="http://sahabatblogger77.blogspot.com" target="_blank"><img class="original" height="250" src="http://1.bp.blogspot.com/-UChM8bWWvSM/Utars3sYSII/AAAAAAAAAh8/CQVnyS0CI9o/s200/Devy-Indriyani.jpg" width="320" /></a>
</div>


Menerapkan Ke- Blog
  1. Login keblogger
  2. Pilih Template >> SESUAIKAN >> Pilih Menu "Tingkat Lanjut"
  3. Di sebelah kanan Copy KODE I pada tab halaman Tambahkan CSS
  4. Terapkan ke Blog
  5. Selanjutnya, pada postingan baru Copy KODE II pada mode HTML
Keterangan -
  1. Ganti teks yang berwarna Merah pada KODE II dengan URL blog anda
  2. Jika ingin Menggunakan gambar sendiri, ganti teks Biru dengan URL gambar anda
  3. Sesuaikan lebar dan tinggi gambar anda pada kode "Width" dan "Height"
SELAMAT MENCOBA, Demikian cara membuat Gambar Otomatis Berubah Saat Tersentuh Mouse

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Gambar Otomatis Berubah Saat Tersentuh Mouse
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

14 komentar

  1. Memberatkan loading bliog g ya mba

    BalasHapus
    Balasan
    1. saya rasa pada dasarnya berat ringannya loading blog itu tergantung banyaknya pemasangan widget pada halaman, terlebih jika pada kolom iklan yang terpasang, kalau trik ini hanya pada gambar di postingan saja,dan anda bisa tentukan postingan mana yang akan di buatkan gambar seperti diatas
      Terimakasih

      Hapus
    2. bs dicb.. trik yg bgs...

      slm knl mbak...

      Hapus
    3. silahkan mbak tari
      Terimaksih sudak bertamu. salam kenal juga

      Hapus
  2. keren nich triknya sista, bisa dicoba nih :)
    kunjungan perdana n makasih sharingnya ^^

    BalasHapus
    Balasan
    1. sy jg kunjungan perdana mbak indri... hehehe...

      happy blogging

      Hapus
    2. Terimakasih atas kunjungannya mbak Indri

      Hapus
  3. mau coba tapi belum ada waktu nih :-d

    BalasHapus
    Balasan
    1. tunggu ada waktu aja kang ucup baru mencobanya :-?

      Hapus
  4. pagi mbk cantik hehehe
    makasih atas tutorialnya,
    saya simpan dulu ya mbk...
    makasih banyak

    BalasHapus
    Balasan
    1. jangan disimpan mulu attuh bang, langsung di coba gitu..buruan..limited edition =))

      Hapus
  5. wah bagus dong kalo gambarnya bisa gonta ganti

    BalasHapus
  6. pingin coba triknya, tapi blog ane ada yang iseng merubah gambarnya,ane bingung ni sis gimana cara betulinnya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK