Membuat Gambar Transisi Dalam Postingan

Membuat Gambar Transisi Dalam Postingan - Transisi merupakan perpindahan suatu objek pertama untuk menggantikan posisi letak pada objek kedua. Dalam hal ini adalah gambar dalam posting yang akan kita jadikan sebagai objek, namun ini hanya sebuah efek untuk memperindah tulisan Anda, karena Ketentuan Cara Menerbitkan Gambar Yang Benar ada beberapa hal yang harus Anda perhatikan saat akan menyisipkan gambar tersebut.

Setelah membuat Animasi Gambar Berjalan Ala SB-77, kini SAHABAT BLOGGER 77 kembali memberikan efek sederhana untuk membuat tulisan Anda terlihat lebih menarik dengan menyisipkan gambar transisi. Pekerjannya cukup mudah, disini Anda cukup menyiapkan 2 buah gambar yang akan kita tampilkan secara bergantian dengan perintah HOVER (transition effect). Letakkan URL-Gambar Anda pada pembentuk CSS dibawah ini:

.img {
/* tampilan gambar depan */
  background: url('URL-Gambar Anda');
  position: absolute;
  width: 200px;height: 200px;
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  -o-transition: background 1s ease;
  border: solid 10px #f2f2f2;border-radius: 30%;
  box-shadow: 0 0 5px #000 inset, 0 0 5px #000
}

Selanjutnya untuk posisi gambar kedua yang akan ditampilkan dengan perintah HOVER (saat panah Mouse melintasi objek/gambar). Agar perintahnya dapat bekerja dalam satu area, kita tambahkan elemen background-position, sehingga yang akan terjadi adalah gambar akan berubah saat panah mouse melintas diatasnya. Letakkan URL-Gambar kedua disini:

.img:hover {
/* tampilan gambar saat hover */
  background: url('URL-Gambar Anda');
  -webkit-transition-: 1s linear;
  -moz-transition-: 1s linear;
  -o-transition-: 1s linear;
  -webkit-background-position: -600px -400px;
  -moz-background-position: -600px -400px;
  -o-background-position: -600px -400px;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg)
}

SELESAI..!!, bentuk gambar sudah dibuat, sekarang kita satukan kedua elemen CSS diatas dalam satu wilayah fungsi, dan hasilnya akan terlihat indah seperti ini:

• CSS
• HTML
• DEMO SHOW

.img {
  /* tampilan gambar depan */
  background: url('URL-Gambar Anda');
  position: absolute;
  width: 200px;height: 200px;
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  -o-transition: background 1s ease;
  border: solid 10px #f2f2f2;border-radius: 30%;
  box-shadow: 0 0 5px #000 inset, 0 0 5px #000
}

.img:hover {
  /* tampilan gambar saat hover */
  background: url('URL-Gambar Anda');
  -webkit-transition-: 1s linear;
  -moz-transition-: 1s linear;
  -o-transition-: 1s linear;
  -webkit-background-position: -600px -400px;
  -moz-background-position: -600px -400px;
  -o-background-position: -600px -400px;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg)
}

<div class="img"></div>

HOVER ME.!

Penerapan ke blog

• Pada tab DEMO SHOW, copy semua kode CSS lalu temukan kode ]]></b:skin> dalam Template Anda, setelah itu letakkan diatasnya atau sebelum kode tersebut.
• Jika dalam halaman posting, cukup bungkus kode CSS diatas dengan tag seperti ini:
  
  
  <style type="text/css">
  ....
  Letakkan kode CSS disini..
  ...
  </style>
  
  lalu letakkan dalam formulir posting mode HTML bukan yang Compose.
• Selanjutnya tinggal menempatkan pemanggil HTML dibawah kode tag penutup </style>