Membuat Gambar Transisi Dalam Postingan

Info informasi Membuat Gambar Transisi Dalam Postingan atau artikel tentang Membuat Gambar Transisi Dalam Postingan ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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>

Demikian artikel tentang Membuat Gambar Transisi Dalam Postingan ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Gambar Transisi Dalam Postingan ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik