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