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.

Transition Effect Hover Image


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:


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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Gambar Transisi Dalam Postingan
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 =

36 komentar

  1. hahaha... saya jadi ketawa sendiri, setelah baca dan lihat demonya baru ngerti yang namanya 'transisi' , trimakasih sahabat :)
    coba2 demo sendiri x-)

    BalasHapus
    Balasan
    1. hufff...kagak baik pak guru ketawa sendiri, kalau senyum-senyum sendiri kan itu wajar, tetapi kalau tertawa sendiri pasti mendatangkan prasangka buruk, jangan-jangan....jangan-jangan deh,
      hehe..!!

      Hapus
  2. Berarti di setiap halaman posting harus di kasih kode css itu ya mbak...

    BalasHapus
    Balasan
    1. sifatnya adalah pilihan mbak, jika ingin menampilkan hanya pada beberapa postingan tertentu saja, bisa kita letakkan kode CSS itu langsung pada halaman.

      Hapus
  3. Dapat ilmu baru dari mbak Devy Indriyani, thank's buat ilmunya mbak :)

    BalasHapus
  4. style yg seperti ini memang keren, hanya saja untuk orang seperti saya malas pasang pasangin kode begitu secara manual :D

    BalasHapus
  5. .Asyik, keren mbak. :)
    .Ternyata hover banyak jenisnya yah mbak.
    .Saya jadi banyak koleksi serta bahan pelajaran seputar css karna blog mbak devy ini. hehe :d

    BalasHapus
    Balasan
    1. hmmm..kurang lebih ya seperti itulah mas, sebenarnya sih hover ini hanya sebuah perintah bila panah mouse diarahkan pada objek yang ditargetkan, sedangkan efeknya beragam banyak yang bisa kita modifikasi dan hubungkan sampai mendapat gaya yang unik dan menarik.

      kebetulan lagi obrak-abrik kode CSS, jadi tercetus ide untuk membuat efek transisi gambar yang simple seperti ini.

      Hapus
    2. .Kalau yang namanya 'Modifikasi' itu memang asyik ya mbak.
      .Tapi sayang, saya tak bisa memodifikasinya.
      .Ajarin saya seputar css dong mbak. ^o^

      Hapus
    3. bayar tapi mas, mau..? hehehe...!!
      Ok mas bukan diajarin tetapi sama-sama belajar aja, soalnya Devy juga gak sehebat mereka yang sudah master dibidang perkodean kok, jadi kalau ada masalah CSS, HTML atau js, mas tanya saja, kalau Devy bisa pasti devy berbagi.
      bagaimana.? deal..!!!

      Hapus
    4. .Bayar berapa mbak? :-? ;(
      .Belum tau mbak, mbaknya nagih. -_- .jadi bingung. memang sih ilmu mahal, tapi kan... ah sudahlah

      Hapus
    5. gak perlu bayar mas, kan semuanya sudah Devy jabarkan di blog ini, hanya semua dipecah dalam beberapa tampilan dalam per 1 postingan.

      Hapus
    6. .Heheiya sih mbak, okedeh kalo gitu mbak devy. :))

      Hapus
  6. owh gitu toh caranya.. makasih banyak mbak, baru tw saya =))

    BalasHapus
    Balasan
    1. bagaimana sangat mudah dan praktis kan,heheh..!!!

      Hapus
  7. Keren mbak, nanti mau di coba ah

    BalasHapus
    Balasan
    1. SEGERA mbak, karena 1 jam lagi postingan ini akan saya hapus, hehe..!! (just kidding)

      Hapus
  8. patut dicoba nih menyelipkan gambar transisi dalam postingannya, kayanya blog udik saya bakalan kliatan okeh kan?...ira-kira bakalan begitu ora ya ?

    BalasHapus
  9. Mantap gan tuotor nya, ane bs cob buat gambar di blo ane,

    BalasHapus
    Balasan
    1. mang Aidil emang cakep euy...saya jadi kalah keren deh nih

      Hapus
    2. hmmmm...kalau dilihat-lihat gak ada bedanya kok, sama-sama keren tuh menurut pandangan Devy mah..

      Hapus
  10. keren ini tipsnya, cuma kalo urusannya sama kode saya jadi gak brani nyoba

    BalasHapus
    Balasan
    1. syukur alhamdulillah donk kalau begitu, lebih baik seperti itu mas, kalau sudah gak berani lebih baik jangan pernah untuk mencoba.

      Hapus
    2. kalau gak berani kamu tidak akan pernah tau rasa dan rahasia apa yang ada di baliknya.

      Hapus
  11. bisa bertransisi seperti itu ya keren seperti blog wordpress berbayar punya sahabat yang lain

    btw kismis bisa dicampur dengan kue kering
    bisa diblender dicampur air dijadikan jus
    atau dicampur yogurt, es krim atau sereal
    bisa dijadikan salad dicampur kol, brokoli, atau bayam, kale
    bisa juga dimakan mentah sebagai cemilan

    BalasHapus
  12. hasilnya gambar transisinya itu yg bikin mata sya jadi spt ini ... x-) hehehe

    BalasHapus
    Balasan
    1. pada kode gambar ada 2 jenis mas, gambar yang mana satu neh yang membuat mata mas Fiu jadi seperti ini, ya biar bisa Devy ganti itu gambar,,!!

      Hapus
    2. itu yg hasil hover nya .... ya phtonya devy yg bkin mata sy jadi spt itu ...hehe .. eh jngn di ganti atuh devy .... hehe

      Hapus
  13. Belajar sendiri mungkin perlu waktu beberapa jam untuk mempelajarinya mba. Kalau ada mba devy langsung disini bisa jadi lebih cepat bisanya membuat gambar transisi :-)

    BalasHapus
    Balasan
    1. ah mbak wida mah bisa aja, saya membuat ini saja butuh 1 hari baru kelar, mbak wida hanya butuh beberapa jam, tetapi hanay sekedar utak-atik doang kok mbak, eh kok bisa jadi begini ya hasilnya, gitu doang, hehe..!!

      Hapus
    2. satu hari tapi jadi juga bagus sista....kalau saya bisa sampai 3 hari kali baru kelar. heee

      Hapus
  14. baru tau juga bisa membuat gambar transisi dalam postingan,hehe terimakasih ya mbak tutorial pembuatannya :)

    BalasHapus
    Balasan
    1. sama donk mbak, Devy juga baru tahu setelah postingan ini Devy publikasikan, cius..!!!??

      Hapus
  15. ternyata mudah ya....kayaknya sih mudah kalau udah faham masalah transisi atau efek hover....heeee
    tapi intinya unik dan bisa menjadi daya tarik tersendiri kalau dimasukkan dalam posting

    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